Плавная прокрутка при клике на якорную ссылку

Я удивлён, что никто не опубликовал нативное решение, которое также обновляет хеш в адресной строке браузера. Вот оно:

let anchorlinks = document.querySelectorAll('a[href^="#"]')

for (let item of anchorlinks) {
    item.addEventListener('click', (e) => {
        let hashval = item.getAttribute('href')
        let target = document.querySelector(hashval)
        target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        })
        history.pushState(null, null, hashval)
        e.preventDefault()
    })
}

См. также учебник: JavaScript Smooth Scrolling

Для сайтов с фиксированными заголовками можно использовать CSS свойство scroll-padding-top, чтобы задать смещение.

Чтобы добиться плавной прокрутки без использования JavaScript, просто добавьте следующий CSS в ваш файл стилей:

html {
    scroll-behavior: smooth;
}

Это всё, что вам нужно. Теперь, при щелчке на ссылки с якорями, прокрутка будет происходить плавно.

Ответ на вопрос на StackOverflow:

$('a[href*=#]').click(function(event) {
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    event.preventDefault();
});

Этот код отлично работает для создания плавной прокрутки к якорям на странице. Он добавляет обработчик клика для всех ссылок с якорями (с атрибутом href, содержащим #). Когда пользователь кликает на такую ссылку, производится анимация прокрутки страницы к целевому элементу, на который ссылается якорь. Параметр 500 задает длительность анимации в миллисекундах.

Использование event.preventDefault() предотвращает стандартное поведение ссылки, чтобы страница не просто прыгала к якорю, а плавно прокручивалась. Если у вас есть какие-то уточнения или вопросы, не стесняйтесь спрашивать!

Существует уже много хороших ответов на этот вопрос, но все они упускают важный момент: пустые якоря необходимо исключить. В противном случае, при клике на пустой якорь в скрипте будут возникать ошибки JavaScript.

На мой взгляд, правильное решение выглядит следующим образом:

$('a[href*=\\#]:not([href$=\\#])').click(function() {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});

Таким образом, мы отфильтровываем пустые якоря и предотвращаем возможные ошибки при их использовании.

На вопрос о плавной прокрутке при переходе по якорным ссылкам хочу отметить, что существует встроенная поддержка плавной прокрутки в CSS. Для этого вам нужно просто добавить следующий стиль в ваш код:

html {
  scroll-behavior: smooth;
}

Это позволит вам достичь эффекта плавной прокрутки при переходах по якорным ссылкам на вашей странице. Более детальную информацию и примеры вы можете найти на сайте W3Schools: How to create smooth scroll.