Плавная прокрутка является элегантным способом улучшить пользовательский опыт на веб-странице. Один из часто используемых методов для реализации этой функциональности — использование библиотеки jQuery.
В данной статье мы разберем код, который обеспечивает плавную прокрутку страницы при клике на якорные ссылки. Код выглядит данным образом:
$("body").on('click', '[href*="#"]', function(e){
var fixed_offset = 100;
$('html,body').stop().animate({ scrollTop: $(this.hash).offset().top - fixed_offset }, 1000);
e.preventDefault();
});Давайте разберем каждую часть кода.
Table of contents [Show]
Обработчик события клика
$("body").on('click', '[href*="#"]', function(e) {Эта строка кода устанавливает обработчик события клика на все элементы <a> (якорные ссылки) внутри элемента body, у которых атрибут href содержит символ "#". Это означает, что обработчик события применяется только к якорным ссылкам.
Фиксированный отступ
var fixed_offset = 100;Переменная fixed_offset устанавливает фиксированный отступ, который будет вычитаться из конечной позиции прокрутки. Это полезно для того, чтобы целевой элемент не располагался слишком близко к верхней границе окна.
Анимация плавной прокрутки
$('html,body').stop().animate({ scrollTop: $(this.hash).offset().top - fixed_offset }, 1000);Здесь выполняется анимация плавной прокрутки. Метод .stop() останавливает текущую анимацию (если она существует), и затем метод .animate() создает новую анимацию.
{ scrollTop: $(this.hash).offset().top - fixed_offset }: Эта часть кода определяет свойство прокрутки (scrollTop) и целевую позицию. $(this.hash) выбирает элемент, на который указывает якорь текущей ссылки, а offset().top возвращает вертикальное смещение этого элемента от верхней границы документа. Вычитание fixed_offset корректирует окончательную позицию.
1000: Это длительность анимации в миллисекундах (в данном случае, 1000 миллисекунд или 1 секунда).
Предотвращение стандартного действия
e.preventDefault();Эта строка предотвращает стандартное действие якорных ссылок, таких как мгновенный переход по ним. Вместо этого мы используем jQuery для плавной анимации прокрутки.
Использование данного кода позволяет добавить плавную прокрутку к якорным ссылкам на вашем веб-сайте, что улучшает пользовательский опыт. Применение jQuery делает процесс реализации этой функции более простым и эффективным.
