Кнопка для сайта вверх-вниз с плавным появлением и плавной прокруткой
Вы наверное задавались вопросом, что нужно сделать, чтобы разместить кнопки вверх/вниз на сайт для прокрутки страницы.
Я уже давно хотел реализовать на сайте что-то подобное, так как иногда очень нужен такой хак, когда приходиться прокручивать несколько экранов, что согласитесь, парой начинает нервировать.
И вот в очередной раз, когда я делал сайт на заказ, мне пришлось сделать такую кнопочку. Демо.
Итак что нужно сделать, чтобы разместить кнопки вверх/вниз на сайт.
Первое, на что хотелось обратить ваше внимание это то, что кнопка вверх плавно появляется только тогда, когда страничка прокручена вниз на указанное число пикселей и плавно пропадет, если страничка была прокручена вверх выше указанного значения в пикселях.
Кнопка вниз, наоборот, изначально видна и плавно исчезает, когда страничка прокручивается вниз ниже указанного значения и плавно появляется, когда страничка была прокручена вверх выше определенного значения.
При нажатии на кнопку вверх или вниз осуществляется плавная прокрутка странички в заданном направлении, а не резкий перескок к началу или концу странички.
На DLE библиотеку jQuery уже подключена, но если у вас сайт на другом движке, то проверьте подключение этой библиотеки. Данная библиотека реализует плавную прокрутку странички вверх и вниз, а также позволяет делать плавное появление и исчезновение кнопок. Подключать библиотеку jQuery следует следующим образом:
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
Кнопки для прокрутки странички вверх и вниз я рекомендую разместить в самом конце странички перед закрывающимся тегом </body>. Это позволит увеличить скорость загрузки основного содержимого Вашего сайта.
После подключения библиотеку jQuery, добавьте в конец Вашей странички, перед закрывающимся тегом </body>, 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>
Теперь остается добавить, после скрипта и описать сами кнопки для прокрутки странички вверх и вниз:
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/
Скачать кнопки можно тут -
- CMS.BIZ.UA - Качественная раскрутка и продвижение сайтов.
