пр. Мира 620000 Россия +7900-000-00-00
Логотип блога интернет-бродяги

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

Как реализуется плавная прокрутка до якоря

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

Как оказалось, реализовать такой функционал достаточно просто. Здесь я оставлю два способа: при помощи 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;}

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

Друзья, плюсаните, вдруг пригодится!

Почитайте похожие материалы

Об авторе: Hobo

3 Comments

  1. Альберт:

    При помощи css интересное решение для плавной прокрутки. Сделал у себя, работает отлично.

    1. Hobo:

      Да, согласен, и нагрузка на сайт меньше.

  2. Вера:

    Пригодилась плавная прокрутка до якоря, когда делала оглавление для постов без плагина. Спасибо!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

15 + = 18

 

Мы используем cookie-файлы для наилучшего представления нашего сайта. Продолжая использовать этот сайт, вы соглашаетесь с использованием cookie-файлов.
Принять