В данной статье мы рассмотрим способ создания кнопки прокрутки страницы вверх при помощи jQuery.Эта кнопка размещается в нижней части страницы, справа. Данная кнопка появляется когда вы листаете страницу вниз. Этот метод реализован при помощи небольшого кусочка CSS и JavaScript кода, ну и картинки которая используется в качестве кнопки.
Данная кнопка хороша тем, что для создании не нужно писать много скриптов, и у нее есть довольно-таки не плохие эффекты.
Что нам нужно
Изображение
HTML код:
Данный HTML код нужно вставить перед закрывающим тэгом </body>
<a href="#" class="scrollup">Наверх</a>
CSS стили:
.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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Затем нам нужно расположить следующий код. Это можно сделать как между <head>…</head>, так и перед закрывающим тэгом </body>.
<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>
Вот весь процесс создания кнопки для прокрутки страницы вверх.
Надеюсь эта статья была для вас полезной 🙂
Так же узнайте как сделать на своем сайте кнопку добавить в избранное
И не забудьте подписаться на нас в телеграмме а также в соц. сетях 😉
Оставьте ответ