По умолчанию, браузеры при клике по ссылке с якорем, делают моментальный переход «прыжок» к целевому элементу. Чтобы сделать прокрутку плавной, в ассортименте разработчика есть два подхода: CSS и JavaScript.
Scroll Behavior
CSS свойство scroll-behavior
сообщает браузеру как обрабатывать прокрутку инициированную внутри элементов.
По умолчанию свойство имеет значение auto
, которое отвечает за мгновенный переход. Именно такой тип перехода встречается на сайтах чаще всего. Если установить параметр smooth
, браузер будет анимировать прокрутку.
Зачастую данное свойство применяется ко всем документу и прописывается тегу html
, если нужно анимировать переход внутри конкретного элемента, свойство применяется к нему.
/* Плавная прокрутка внутри элемента */
#my-element {
scroll-behavior: smooth;
}
/* Плавная прокрутка всего документа */
html {
scroll-behavior: smooth;
}
Но не стоит забывать о пользователях, которые предпочитают отключать анимацию в настройках браузера или операционной системе.
@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
Поддержка браузерами
У данного свойства хорошая поддержка современными браузерами за исключением Safari (десктоп и мобильный), а так же IE.
Почему вы все еще можете использовать JavaScript
Несмотря на то, что вышеописанный подход имеет неплохую поддержку и в большинстве случаях этого достаточно для использования в проекте, вот несколько причин по которым JS все еще может оказаться полезным:
- Свойство
scroll-behavior
не поддерживает настройки ускорения, замедления и продолжительности, для этого вам нужен JavaScript. - Вы хотите, чтобы плавная прокрутка работала в разных браузерах. Решение JavaScript может предоставить вам более широкую поддержку браузеров.
Плагин Smooth Scroll
Вы по-прежнему можете использовать любые доступные JS-плагины для включения на сайте плавной прокрутки. Один из таких Smooth Scroll. Автор данного плагина прекратил работу над ним, так как не видит в нем необходимости в условиях развития CSS решения.
Плагин поддерживает все современные браузеры, включая IE9 и выше, а так же имеет множество настроек.
Плавная прокрутка с помощью jQuery
jQuery тоже умеет плавно крутить педали страницу. Следующий код инициализирует плавную прокрутку к якорю на той же странице. Он имеет некую логику для определения якорных ссылок и не затрагивает другие, а так же устанавливает фокус на якорный элемент после прокрутки.
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.on('click', function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.trigger('focus');
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.trigger('focus'); // Set focus again
};
});
}
}
});
Упрощенный вариант:
$('a[href*="#"]').on('click', function() {
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 400);
return false;
});