Frontend
Плавная прокрутка до якоря в html
HTML-якоря позволяют быстро прокручивать страницу к нужному блоку или разделу сайта.
Чаще всего якоря используются:
- в лендингах;
- в меню одностраничных сайтов;
- в FAQ;
- в навигации по длинным статьям;
- для кнопок «Наверх»;
- в содержании статей.
В этой статье разберем:
- как создать HTML-якорь;
- как сделать ссылку на якорь;
- как реализовать плавную прокрутку через JavaScript и jQuery.
Создаем HTML-якорь
Для начала создадим простую HTML-страницу со ссылкой и якорем.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Anchor</title>
</head>
<body>
<a href="#anchor">
Ссылка на якорь
</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="anchor">
Якорь
</div>
</body>
</html>Как работает HTML-якорь
Здесь:
href="#anchor"— ссылка на якорь;id="anchor"— сам якорь.
При клике браузер автоматически прокрутит страницу к элементу с указанным ID.
Важно: ошибка в id якоря
Обратите внимание:
в id не нужно ставить символ #.
Правильно:
<div id="anchor"></div>Неправильно:
<div id="#anchor"></div>Плавная прокрутка к якорю через JavaScript
По умолчанию браузер мгновенно прыгает к якорю.
Чтобы сделать красивую плавную прокрутку, используем jQuery:
<script>
$("body").on(
'click',
'[href*="#anchor"]',
function(e){
var fixed_offset = 100;
$('html, body')
.stop()
.animate({
scrollTop:
$(this.hash)
.offset()
.top - fixed_offset
}, 1000);
e.preventDefault();
}
);
</script>Как работает скрипт
href*="#anchor"— отслеживает клик по ссылке;scrollTop— прокручивает страницу;1000— время анимации в миллисекундах;fixed_offset— отступ сверху.
Зачем нужен fixed_offset
Отступ сверху нужен, если на сайте есть фиксированное меню или header.
var fixed_offset = 100;Например:
- 100px — высота фиксированного header;
- 80px — мобильное меню;
- 0 — без отступа.
Подключение jQuery
Для работы скрипта нужно подключить jQuery:
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>Где используются HTML-якоря
- меню лендингов;
- переходы по разделам;
- FAQ-блоки;
- содержание статьи;
- кнопка «Наверх»;
- плавная навигация по странице.
Итог
HTML-якоря — простой и удобный способ навигации по странице.
А плавная прокрутка через JavaScript делает интерфейс более современным и удобным для пользователя.
Комментарии