В этом уроке мы рассмотрим, как создать кнопку «Вверх» с помощью JQuery.
Иногда при просмотре страниц на веб-сайте, после прокрутки вниз, подняться вверх по странице с помощью стандартной прокрутки не всегда удобно. Таким образом, кнопка «Наверх» — это удобная функция, позволяющая сэкономить время.
Эта кнопка скрыта, когда пользователь находится вверху страницы, но когда пользователь начинает прокручивать ее вниз, она появляется.
Если на эту кнопку нажать, страница автоматически прокрутит содержимое вверх и кнопка снова скроется.
HTML код формы
Допустим, что у нас есть такой код нашей кнопки:
<div id="back-top">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="20" x2="12" y2="4"/><polyline points="6 10 12 4 18 10"/></svg>
</div>
Здесь все предельно просто, есть блок с идентификатором, который и будет задавать внешний вид нашей кнопки и с которым будет работать наш скрипт.
Внутри этого блока размещен код для вывода изображения кнопки, в данном примере это SVG изображение, здесь вы можете указать любой код для своего изображения.
CSS код формы
Что касается стилей, то здесь все стили произвольные, настраиваются индивидуально для каждой кнопки.
#back-top {
position: fixed;
bottom: 50px;
right: 50px;
background: rgba(238,238,238);
padding: 10px;
width: 30px;
height: 30px;
border-radius: 50%;
display: block;
}
#back-top:hover {
cursor: pointer;
opacity: .8;
}
#back-top svg {
width: 100%;
height: 100%;
stroke: #fff;
}
В стилях мы задаем расположение кнопки на экране, ее внешний вид, размер и поведение при нажатии на нее.
JQuery код формы
Основную работу будет выполнять наш скрипт. Если вам нужно, чтобы этот скрипт создавал HTML код кнопки, это можно легко сделать.
В этом случае вам нужно создать только стили для кнопки, все остальное сделает скрипт, ниже пример такого кода.
$(document).ready(function() {
// Выводим иконку с помощью скрипта
$('body').append('<div id="back-top"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="20" x2="12" y2="4"/><polyline points="6 10 12 4 18 10"/></svg></div>');
// Прячем кнопку
$("#back-top").hide();
// Обрабатывает прокрутку страницы вниз
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// Обрабатываем поведение страницы при нажатии на кнопку
$('#back-top').click(function(e) {
e.preventDefault();
$('html, body').animate({scrollTop:0}, '300');
});
});
Здесь тоже все просто, сначала мы создаем кнопку: $('body').append();, затем прячем нашу кнопку: $("#back-top").hide();.
Затем обрабатываем поведение кнопки при прокрутке страницы вниз: $(window).scroll(function()
И еще одна функция обрабатывает поведение страницы при нажатии на кнопку: $('#back-top').click(function(e)
Если вы не хотите создавать кнопку с помощью скрипта, то просто удалите часть кода, который отвечает за ее создание.
Как видите все просто, но этот простой код сделает ваш сайт удобным для посетителя.
Ниже вы можете увидеть этот код в работе:
Kwork