Скроллинг страницы на jquery
Доброго времени суток, дорогие читатели моего блога! В данной заметки я расскажу и покажу вам, как сделать плавный скроллинг на джейквери. То бишь расскажу как прикрутить интересную фичу к сайту, которая обычно находиться в правом нижнем углу и выглядит в виде кнопки с текстом “Наверх” или в виде стрелочки. Полезность данной фичи заключается в том, что она избавит посетителей вашего сайта от терзания колесика компьютерной мышки, постоянно прокручивая страницу вверх.
Кстати, на моем блоге она тоже есть 
. Только на моем блоге она реализована с помощью бесплатного WordPress плагина “Dynamic To Top”. Такой способ реализации кнопки возврата на верх безусловно очень хорош, но он не подойдет, допустим для самописных сайтов. Поэтому вариант с готовыми плагинами и модулями мы пока что рассматривать не будем. Рассмотрим вариант, который подойдет для любого сайта и для любой cms системы. Будь это WordPress, Joomla, DLE не важно.
Код на самом деле очень простой.
Открываем индексную страницу шаблона сайта, после тега <body> добавляем код самой кнопки
|
1 |
<div id="toTop">^ Наверх ^</div> |
Между тегами <head></head> добавляем код jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> jQuery(function() { jQuery(window).scroll(function() { if(jQuery(this).scrollTop() != 0) { // Если до верха не 0px jQuery('#toTop').fadeIn(); // Плавно показываем кнопочку } else { // Иначе (Если мы вверху страницы) jQuery('#toTop').fadeOut(); // Плавно скрываем кнопочку } }); jQuery('#toTop').click(function() { jQuery('body,html').animate({scrollTop:0},800); }); }); </script> |
Открываем css шаблона, и придаем стиль нашей кнопочки
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#toTop { width:100px; /* Ширина кнопки*/ border:1px solid #000; /* Рамка вокруг */ background:#000; /* Цвет фона */ text-align:center; /* Выравнивание текста внутри блока */ padding:5px; /* Отступ от текста во все стороны */ position:fixed; /* Фиксируем положение кнопки*/ bottom:10px; /* Отступ снизу*/ right:10px; /* Отступ справа */ cursor:pointer; /* курсор */ display:none; /* Скрываем */ color:#fff; /* Цвет текста */ } |
Вот и все готово. Кнопка с текстом ^ Наверх ^ при прокрутки страниц в низ сайта, должна плавно появляться.
Чтобы в место простой кнопки с текстом появлялась красивая стрелочка, достаточно прописать путь до картинки в css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#toTop { width:100px; /* Ширина кнопки*/ border:1px solid #000; /* Рамка вокруг */ background: url(путь/стрелочка.png) /* Красивая стрелочка*/ text-align:center; /* Выравнивание текста внутри блока */ padding:5px; /* Отступ от текста во все стороны */ position:fixed; /* Фиксируем положение кнопки*/ bottom:10px; /* Отступ снизу*/ right:10px; /* Отступ справа */ cursor:pointer; /* курсор */ display:none; /* Скрываем */ color:#fff; /* Цвет текста */ } |
И удалить текст с блока
|
1 |
<div id="toTop"></div> |
Пробуем, делимся, радуемся. Удачи!
Если есть вопросы, задавайте в комментариях 
С уважением, Игорь Дулин
Рад видеть Вас на своем сайте! Меня зовут Игорь Дулин, 27 лет. Занимаюсь созданием, продвижением и монетизацией сайтов с 2008 года.
Комментариев: нет
Оставить комментарий