Плавная прокрутка к якорю с отступом сверху

Пара примеров как сделать плавную прокрутку к якорю в тексте на Jquery. В первом примере я покажу простой способ перемещения к якорю. Во втором -  боле интересный момент: перемещение с отступом сверху.

Итак. Основной принцип перемещения основан на использовании функции animate(). На обработчик события click повесить функцию, которая найдёт hash якоря и с заданным интервалом переместится к якорю. Всё достаточно просто.

$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 500, function() {
          target.focus();
        });
        return false;
      }
     }
   });

Но если на сайте есть фиксированная шапка, она закроет якорь. Значит нужно добавить отступ. 

Посчитаем высоту шапки:

headerHeight = $('.header').height() + 110;  

где .header - класс шапки, 110 - значение высоты, получаем экспериментально.

Добавим в первый пример новые вводные:

$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      headerHeight = $('.header').height() + 110;  
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - headerHeight
        }, 500, function() {
          target.focus();
        });
        return false;
      }
     }
   });

где в строке получение значения текущей позиции вычтена высота шапки headerHeight.

Для использования примеров код вставить в теги 

   <script type="text/javascript"> ...код... </script>

Всё. Удачи!

 

Алексей 26 августа, 2017

Сложно... почему везде так сложно(

Евгений 15 сентября, 2018

Как сделать, чтобы на мобильном работало?

Роман 26 декабря, 2018

Круто, спасибо! Столько сайтов облазил, и добрался до вашего!

Сергей 01 октября, 2019

Алексей, спасибо за статью, очень помогло!

Оставить комментарий

Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.

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