Делаем кнопку «Наверх»
Сегодня речь пойдет о кнопке «scroll to top». У себя на блоге webvim я уже добавил эту полезную «мелочь». Другими словами, «scroll to top» — кнопка, позволяющая пролистать контент к началу страницы. Очень полезная функция, при больших объемах текста. Избавит ваших пользователей от ручной прокрутки и продлит жизнь их «мышки».
Как работает scroll to top?
В код шаблона вставляем блок div
В файл стилей css добавляем следующий код
1 2 3 4 5 6 7 8 9 10 11 |
#scroller{ position: fixed; right:30px; bottom: 30px; background:url(up-demo.png); width: 76px; height: 76px; cursor: pointer; display:none; opacity:0.6; } |
Добавляем функцию в файл скриптов
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(document).ready(function(){ //fade in/out based on scrollTop value $(window).scroll(function () { if ($(this).scrollTop() > 0) { $('#scroller').fadeIn(300); //задаем скорость исчезновения кнопки } else { $('#scroller').fadeOut(200); //задаем скорость появления кнопки } }); // scroll body to 0px on click $('#scroller').click(function () { $('body,html').animate({ scrollTop: 0 }, 200); //задаем скорость прокрутки return false; }); }); |
Кнопка Scroll to top одна из тех мелочей, которая придает завершенность вашему сайту, повышает удобство пользования web ресурсом. Второй такой мелочью является фавикон вашего сайта. Советую прочитать как установить фавикон на сайт.