Создадим простую плавную прокрутку страницы с помощью библиотеки jQuery. Это реализуется достаточно просто, но вызывает вопросы у многих разработчиков. В этом руководстве мы пошагово реализуем данную функциональность, используя уже скачанную библиотеку jQuery.
Подготовка проекта
Создадим HTML-документ. Для удобства редактирования кода можно использовать расширение для текстового редактора (ссылка). Пример HTML-документа с необходимыми элементами представлен ниже.
Добавление jQuery
Подключаем jQuery к HTML-документу. Путь к файлу библиотеки указывается в <script>-теге:
<script src="path/to/jquery.js"></script>Замените "path/to/jquery.js" на фактический путь к вашему файлу jQuery.
Разметка и стили
Создадим две ссылки: для прокрутки вниз и вверх. Также создадим <div> с, до которого будем прокручивать страницу. Добавим стили, чтобы этот <div> находился достаточно далеко от верха страницы:
<a href="#" onclick="slowScroll('more'); return false;">Более подробно</a>
<a href="#" onclick="slowScroll('top'); return false;">Наверх</a>
<div id="more" style="margin-top: 2000px;">
<p>Больше информации</p>
</div>Добавим стили, например, в <style>-тег в <head>:
#more {
margin-top: 1000px;
}Функция прокрутки
Создадим функцию slowScroll, которая обрабатывает анимацию прокрутки. Функция принимает идентификатор элемента, до которого нужно прокрутить. Для предотвращения перекрытия контента шапкой сайта можно добавить offset. В данном примере offset не используется.
function slowScroll(id) {
let offset = 0;
$('html, body').animate({
scrollTop: $('#' + id).offset().top - offset
}, 500, 'swing', function() {
//Callback function after animation
});
}Функция использует animate() для плавной прокрутки к элементу с указанным ID. offset позволяет сдвинуть позицию прокрутки. Скорость анимации — 500 миллисекунд.
Использование функции
Функция slowScroll используется в обработчиках кликов ссылок, передавая id элемента. Для ссылки «Наверх» используется id «top» (для этого можно добавить пустой <div> с вверху страницы). return false; предотвращает стандартное поведение ссылки.
После обновления страницы, клик по ссылкам «Более подробно» и «Наверх» вызовет плавную прокрутку к соответствующим элементам. Этот метод прост и не требует добавления якорей (#) в URL.