Новость из категории: Что делать, Изготовление сайтов

Кнопка для сайта вверх-вниз с плавным появлением и плавной прокруткой

Кнопка для сайта вверх-вниз с плавным появлением и плавной прокруткойВы наверное задавались вопросом, что нужно сделать, чтобы разместить кнопки вверх/вниз на сайт для прокрутки страницы.

Я уже давно хотел реализовать на сайте что-то подобное, так как иногда очень нужен такой хак, когда приходиться прокручивать несколько экранов, что согласитесь, парой начинает нервировать.

И вот в очередной раз, когда я делал сайт на заказ, мне пришлось сделать такую кнопочку. Демо.

Итак что нужно сделать, чтобы разместить кнопки вверх/вниз на сайт.

Первое, на что хотелось обратить ваше внимание это то, что кнопка вверх плавно появляется только тогда, когда страничка прокручена вниз на указанное число пикселей и плавно пропадет, если страничка была прокручена вверх выше указанного значения в пикселях.

Кнопка вниз, наоборот, изначально видна и плавно исчезает, когда страничка прокручивается вниз ниже указанного значения и плавно появляется, когда страничка была прокручена вверх выше определенного значения.

При нажатии на кнопку вверх или вниз осуществляется плавная прокрутка странички в заданном направлении, а не резкий перескок к началу или концу странички.

На DLE библиотеку jQuery уже подключена, но если у вас сайт на другом движке, то проверьте подключение этой библиотеки. Данная библиотека реализует плавную прокрутку странички вверх и вниз, а также позволяет делать плавное появление и исчезновение кнопок. Подключать библиотеку jQuery следует следующим образом:

<script language="javascript" type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">  </script>

Кнопки для прокрутки странички вверх и вниз я рекомендую разместить в самом конце странички перед закрывающимся тегом </body>. Это позволит увеличить скорость загрузки основного содержимого Вашего сайта.

После подключения библиотеку jQuery, добавьте в конец Вашей странички, перед закрывающимся тегом </body>, javascript код, который будет отвечать за прокрутку, появление и исчезновение кнопок вверх и вниз:

<script language="javascript" type="text/javascript">
var go_down = jQuery('body'); jQuery(function() { $("#Go_Top").hide().removeAttr("href"); if ($(window).scrollTop() >= "250") $("#Go_Top").fadeIn("slow") var scrollDiv = $("#Go_Top"); $(window).scroll(function() { if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow") else $(scrollDiv).fadeIn("slow") }); $("#Go_Bottom").hide().removeAttr("href"); if ($(window).scrollTop() <= go_down.height()-"999") $("#Go_Bottom").fadeIn("slow") var scrollDiv_2 = $("#Go_Bottom"); $(window).scroll(function() { if ($(window).scrollTop() >= go_down.height()-"999") $(scrollDiv_2).fadeOut("slow") else $(scrollDiv_2).fadeIn("slow") }); $("#Go_Top").click(function() { $("html, body").animate({scrollTop: 0}, "slow") }) $("#Go_Bottom").click(function() { $("html, body").animate({scrollTop: go_down.height()}, "slow") }) });  </script>

Теперь остается добавить, после скрипта и описать сами кнопки для прокрутки странички вверх и вниз:

<a style='position: fixed; bottom: 60px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Top'> <img src="{THEME}/images/ups.png" alt="Наверх" title="Наверх"> </a> <a style='position: fixed; bottom: 20px; right: 1px; cursor:pointer; display:none;' href='#' id='Go_Bottom'> <img src="{THEME}/images/bottom.png" alt="Вниз" title="Вниз">  </a>

Да и незабудьте загрузить сами картинки кнопок в папку /templates/ваш шаблон/images/

Скачать кнопки можно тут - Вы не можете скачивать файлы с нашего сервера

Рейтинг:

(Голосов: 7)

Нашли ошибку? Выделить текст и нажмите Ctrl+Enter

Похожие новости

Комментарии

Информация

© 2010 - 2017

Мы в Google+