RealAdmin.ru

Плавная прокрутка к якорю на JavaScript и jQuery

Плавная прокрутка к якорю на JavaScript и jQuery
Категория: Кодинг
Комментарии: 0

При клике по якорной ссылке браузеры автоматически устанавливают положение страницы так, чтобы якорный элемент оказаля в самом верху видимой области. Но у этого подхода есть 2 существенных недостатка: прыжок к якорю осуществляется мгновенно и позиционирование нарушается, если на сайте используется плавающая шапка. Решаются эти недостатки с помощью чистого JavaScript или в связке с библиотекой jQuery.

Пример якорной ссылки (нажми для перехода)

Для удобства работы с такими ссылками рекомендую устанавливать для них определенный класс, например «scroll-to»:

<a href="#ya1" class="scroll-to">Ссылка 1</a>
<a href="#ya2" class="scroll-to">Ссылка 2</a>
<a href="#ya3" class="scroll-to">Ссылка 3</a>

Соответственно, у элементов, к которым нужно осуществить прокрутку, должны быть установлены аттрибуты: «id="ya1"» и так далее.

Прокрутка с использованием jQuery

Самый простой способ организации плавной прокрутки, это использовать библиотеку jQuery.

$("a.scroll-to").on("click", function(e){
    e.preventDefault();
    var anchor = $(this).attr('href');
    $('html, body').stop().animate({
        scrollTop: $(anchor).offset().top - 60
     }, 800);
});

В примере на все ссылки с классом «scroll-to» навешивается событие «onclick». Двумя важными параметрами в этом коде являются значения 60 и 800.

  • 60 — высота фиксированной плавающей шапки, если она есть. Устанавливается чтобы при прокрутке якорный элемент не перекрывался ей. Если фиксированной шапки нет, то значение убирается или устанавливается в 0.
  • 800 — скорость прокрутки, измеряемая в миллисекундах. Чем меньше значение, тем быстрее будет переход.

Плавная прокрутка на чистом JS

Теперь рассмотрим код на чистом JavaScript без использования сторонних библиотек.

const anchors = document.querySelectorAll('a.scroll-to')

for (let anchor of anchors) {
  anchor.addEventListener('click', function (e) {
    e.preventDefault()
    
    const blockID = anchor.getAttribute('href')
    
    document.querySelector(blockID).scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
  })
}

Код вырос незначительно, а функционал остался прежним. Здесь используется стандартный JavaScript метод «scrollIntoView». Он позиционирует прокрутку так, чтобы элемент оказался в видимой области браузера. Метод принимает 2 параметра:

  • behavior — определяет тип анимации — auto или smooth;
  • block — задает в какое место элемента надо переместиться, принимает значения — start, center, end или nearest.
Теги:
Посмотрите похожее — 6
Комментарии —
    © REALADMIN.RU   2019 г.
    Страница сгенерирована: 0,2081 s | 12 mb.
    На каком уровне Вы играете в шахматы?
    О П Р О С