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

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

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

Пара примеров как сделать плавную прокрутку к якорю в тексте на 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>

Источник: https://delay-delo.com


Внимание!
Для просмотра скрытого текста, Вам необходимо Войти или Зарегистрироваться.
  • Полезные статьи
  • 4-08-2018, 12:10
  • 188
Вернуться назад
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.