В недавнем проекте мне нужно было реализовать плавную прокрутку при использовании якорной ссылки.

Якорь в HTML - это закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке.

Чтобы создать якорь, нужно сначала сделать разметку в соответствующем месте и дать ей имя при помощи атрибута name тега <a> (устаревший) или id тега. В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) перед ним. Подробнее в учебнике по HTML

<p id="faq">...</p>

<nav>
  <ul>
    <li><a href="#faq">Частые вопросы</a></li>
    <li>...</li>
  </ul>
</nav>
Пример с атрибутом <id>

Используем JS для плавной прокрутки

Подключаем библиотеку добавляя следующий код в перед закрытием <header>

<script src="https://code.jquery.com/jquery-3.5.1.min.js">

Добавляем код для плавной прокрутки к якорю. Где значение t = 500 означает скорость прокрутки. Если нам нужно переместится к якорю со сдвигом, то в 7ой строчке к top дописываем нужное значение. Например top -70px будет перемещаться к якорю со сдвигом вверх на 70px.

<script>
$(document).ready(function(){
$('a[href^="#"], *[data-href^="#"]').on('click', function(e){
e.preventDefault();
var t = 500;
var d = $(this).attr('data-href') ? $(this).attr('data-href') : $(this).attr('href');
$('html,body').stop().animate({ scrollTop: $(d).offset().top}, t);
});
});
</script>
Поделись этой записью