Сегодня мы вновь попрактикуемся с jQuery. Мы будем писать скрипт плавного скроллинга при нажатии на кнопку. Сделаем так чтобы при нажатии на кнопку, пользователя плавно переносило на нужный блок. Этот скрипт можно использовать для создания красивого якорного меню.
Вот скрипт, который нам понадобится.
<script type="text/javascript">
function slowScroll(id) {
var offset = 0;
$('html, body').animate({
scrollTop: $(id).offset().top - offset
}, 1000);
return false;
}
</script>
Скрипт состоит из функции, в качестве единственного параметра которой является переменная со значением id блока, куда нужно сделать плавный переход.
Внутри функции в первой строке создается переменная offset со значение 0.
animate — позволяет выполнить пользовательскую анимацию основанную на изменении CSS свойств для выбранных элементов.
scrollTop — получает значение отступа прокрутки сверху для первого элемента в наборе.
Там где стоит 1000, указывается время продолжительности перехода. Изменив это время вы ускоряете, либо замедляете прокрутку.
Как это работает?
Давайте напишем тестовый код, на котором мы попробуем наш скрипт в работе.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
#block1 {
margin: 1200px 0px 100px 0px ;
}
</style>
</head>
<body>
<a href="#block1" onclick="slowScroll('#block1')">Заказать звонок!</a>
<div id="block1">
Привет!
</div>
<script type="text/javascript">
function slowScroll(id) {
var offset = 0;
$('html, body').animate({
scrollTop: $(id).offset().top - offset
}, 1000);
return false;
}
</script>
</body>
</html>
Здесь обычный HTML шаблон.
Для того чтобы скрипт работал, вам необходимо подключить библиотеку jquery.
Так же для наглядности, я сделал отступ между тестируемыми элементами, чтобы показать скролл. Я не стал заморачиваться с создание отдельного файла для стилей, и записал все внутрь тега head.
Берем ссылку:
<a href="#block6" onclick="slowScroll('#block6')">Заказать звонок!</a>
В атрибуте href указываем блок к которому нам нужно сделать переход, это прописывается на случай если плавный скролл не сработает, чтобы пользователя все ровно перенесло на выбранный блок. В событии onclick мы указываем название функции и в качестве параметра указываем id блока на который нужно сделать плавный переход.
Вот и все! Я использовал ссылку, вы же можете использовать любой контект, к которому вы укажите событие onclick
