Плавная прокрутка страницы до якоря

Последнее бновение - 15 января 2023 в 16:24

Совсем недавно меня заинтересовал вопрос, как сделать на сайте плавную прокрутку страницы до якоря. Произошло это во время реализации функционирования в записях оглавления без использования плагина. Проблем никаких не возникло, но скроллинг от пункта, содержащегося в оглавлении до соответствующего ему заголовка, мне не совсем понравился. Не хватало именно плавности при переходе. Хотелось, чтобы перемещение вниз до якорька осуществлялось так же, как и прокрутка при нажатии на кнопку «вверх» в правом нижнем углу страницы.

Как оказалось, реализовать такой функционал достаточно просто. Здесь я оставлю два способа: при помощи JQuery и CSS.

На JQuery

В данном варианте необходимо проверить, подключена и работает ли на сайте библиотека JQuery. Если всё ok, то открываем на редактирование файл footer.php и перед закрывающим тегом body вставляем скрипт, не забывая пересохранить файл:

<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>

Строку 4 можно изменять по своему усмотрению. Это скорость прокрутки. Значение «500» в примере соответствует половине секунды.

Чтобы скроллинг, к примеру, осуществлялся выше якоря на 50px, необходимо внести изменения в строку 7 кода. Выглядеть она теперь будет так:

$('html,body').stop().animate({ scrollTop: $(d).offset().top - 50 }, t);

И ещё один проверенный рабочий код:

<script>
$(document).ready(function() {
var margin = 100; // переменная, контролирующая докрутку
$("a").click(function() { // тут писать условия, для всех ссылок или для конкретных
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top+margin+ "px" // .top+margin - ставим минус, если надо увеличить отступ
}, {
duration: 1500, // регулируем скорость прокрутки
easing: "swing"
});
return false;
});
});
</script>

С помощью CSS

Предыдущий способ прекрасно сработал на моём сайте. Однако, скрипт плавной прокрутки до якоря вошёл в конфликт со скриптом, который обеспечивает скроллинг при нажатии на кнопку «Вверх». Кнопка в общем-то работала, но пропала плавность — подъём вверх происходил теперь мгновенно.

Мне потребовался альтернативный способ. Проблема была решена при помощи CSS (каскадные таблицы стилей). Достаточно внести всего одну строчку в файл style.css:

html {scroll-behavior: smooth;}

Таким образом, мне удалось реализовать и плавную прокрутку до якоря, и сохранить плавный скроллинг вверх.