Плавная прокрутка – это популярная функция на веб-сайтах, которая обеспечивает плавный переход к разделам страницы при клике на якорные ссылки. Эта статья расскажет о том, как реализовать плавную прокрутку с помощью JavaScript.
Что такое якорные ссылки
Якорные ссылки – это гиперссылки на той же странице, которые ведут к определенному разделу или элементу. Обычно они используются для улучшения навигации на странице.
Пример якорных ссылок.
HTML-код раздела на странице:
<div id="section1">
<h2>Раздел 1</h2>
<p>Содержание раздела 1 здесь.</p>
</div>
<div id="section2">
<h2>Раздел 2</h2>
<p>Содержание раздела 2 здесь.</p>
</div>
Теперь создадим якорные ссылки, чтобы перейти к этим разделам:
<a href="#section1">Перейти к разделу 1</a>
<a href="#section2">Перейти к разделу 2</a>
Принципы работы плавного скролла
Для реализации плавной прокрутки, нам нужно сначала определить все якорные ссылки на странице, а затем добавить обработчик событий, который будет перехватывать стандартное поведение браузера и заменять его плавной анимацией прокрутки.
Вот пример базового скрипта для реализации плавной прокрутки:
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
Объяснение кода:
- Выборка элементов: document.querySelectorAll(‘a[href^=»#»]’) выбирает все ссылки, href которых начинается с #.
- Добавление обработчика событий: addEventListener применяется к каждой найденной ссылке для обработки клика.
- Отмена стандартного поведения: e.preventDefault() предотвращает стандартное поведение ссылки (переход к якорю без анимации).
- Плавная прокрутка: scrollIntoView({ behavior: ‘smooth’ }) плавно прокручивает страницу к выбранному элементу.
Выдает ошибку: Uncaught TypeError: this.getAttribute is not a function