Если вы обратили внимание, на блоге появилось две кнопки которые помогают в навигации, подняться по сайту или опуститься.
Давно их хотел сделать и вот сегодня это хотение реализовал.
Как?
Как всегда на помощь пришёл интернет. Порывшись и попробовав разные методы реализации остановился на реализации посредством JavaScript и jQuery.
Сами кнопки тоже скачал с интернета и разместил в корне блога на хостинге.
Ну а теперь, как же всё таки
Сделать кнопку вверх вниз
Итак.
Первое что нужно будет сделать это прописать тип документа, чтобы скрипт работал без сбоев. Прописываем в файле (header.php) вот такие строчки:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
или
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Что мне нравится в этом скрипте так это то что в самом верху блога появляется кнопка вниз. Затем когда пользователь начинает читать и спускается вниз появляются обе кнопки.
И уже когда пользователь в самом низу блога появляется кнопка наверх, а кнопка вниз исчезает. Мелочь, а интересно.
И чтобы переместиться по странице вверх или вниз нужно нажать ту или иную кнопку. При нажатии происходит плавная прокрутка страницы в нужном направлении.
Чтобы получились такие эффекты от кнопок необходимо произвести не очень сложные манипуляции.
Это подключить jQuery, которая отвечает за плавную прокрутку и JavaScript который отвечает за прокрутку и появление и исчезновение кнопок.
Сначала подключим библиотеку jQuery.
Вставьте код, который видите ниже, опять же в страницу (header.php) перед закрывающим тегом /head:
На этом в (header.php) больше ничего не ставьте. Остальной код вставляйте в файл (footer.php) в самый низ перед закрывающим тегом /body.
Такая вставка не будет снижать загрузку основного контента блога и сами кнопки будут размещаться внизу блога.
Вот этот код:
И далее ещё код который отвечает за размер кнопок, их размещение слева, справа или по центру.
Вместо –
image/go_up.png
впишите адрес своего блога и где находятся картинки кнопок. Например вот так:
https://gertc.com/verh.png
Изображения кнопок можно нарисовать самому или скачать с интернета. Их огромное количество на любой вкус и размер.
Всё. Сделать кнопки оказалось не так и сложно…
ПыСы:
В кодах уберите звёздочки – *, перестал работать плагин отображения кода…
ПыСыПыСы:
Вроде исправил, теперь не надо никакие звёздочки удалять…
Подпишись на
Будут Сосны до Небес,
Вот. Не Подписался,
Без Сосны Остался.
Tags: кнопки
Июнь 7th, 2013 at 4:58
То, как будет выглядеть ваша кнопка, тоже достаточно легко можно изменить. Вы можете закачать новую картинку кнопки, только не забудьте поменять путь к ней в файле footer.php. Очень много разнообразных картинок для кнопки «Наверх» можно подыскать в Интернете. Если вы умеете работать с графическими редакторами, такими как Photoshop, вам не составит труда нарисовать кнопку самому.