В данной статье мы рассмотрим способ создания кнопки прокрутки страницы вверх при помощи jQuery.Эта кнопка размещается в нижней части страницы, справа. Данная кнопка появляется когда вы листаете страницу вниз. Этот метод реализован при помощи небольшого кусочка CSS и JavaScript кода, ну и картинки которая используется в качестве кнопки.
Данная кнопка хороша тем, что для создании не нужно писать много скриптов, и у нее есть довольно-таки не плохие эффекты.
Что нам нужно
Изображение
HTML код:
Данный HTML код нужно вставить перед закрывающим тэгом </body>
|
1 |
<a href="#" class="scrollup">Наверх</a> |
CSS стили:
|
1 2 3 4 5 6 7 8 9 10 11 |
.scrollup{ width:40px; height:40px; opacity:0.3; position:fixed; bottom:50px; right:100px; display:none; text-indent:-9999px; background: url('icon_top.png') no-repeat; } |
При помощи данных стилей, мы определяем позицию кнопки и задаем для нее отступы 50px снизу и 100px справа. Данный стили лучше добавить в файл с вашими стилями.
jQuery:
Сначала нужно подключить библиотеку jQuery, если она еще не подключена. Сделать это можно при помощи данного скрипта, вставив его между тегами <head>…</head>
|
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> |
Затем нам нужно расположить следующий код. Это можно сделать как между <head>…</head>, так и перед закрывающим тэгом </body>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script type="text/javascript"> $(document).ready(function(){ $(window).scroll(function(){ //Определяет положение полосы прокрутки и если ниже 100px, то появляется кнопка. if ($(this).scrollTop() > 100) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } }); $('.scrollup').click(function(){ //Есть еще два значения: //0 - страница будет прокручена до самого налача //600 - скорость анимации прокрутки $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); </script> |
Вот весь процесс создания кнопки для прокрутки страницы вверх.
Надеюсь эта статья была для вас полезной 🙂
Не забудьте подписаться на нас в телеграмме а также в соц. сетях 😉
Оставьте ответ