Как я могу использовать Velocity.js для плавной прокрутки к элементу? - PullRequest
Новая
       20

Как я могу использовать Velocity.js для плавной прокрутки к элементу?

0 голосов
/ 24 января 2019

У меня есть кнопка (в моем случае тег привязки, стилизованный как кнопка), которую я использую jQuery для прослушивания события щелчка.

Когда я нажимаю кнопку, как я могу плавно перейти к цели?

Вот что у меня есть: 

$('a[href*="#"]').on('click', function (event) {
    event.preventDefault();

    let position = $($(this).attr("href")).offset().top;

    $('body').velocity('scroll', {
        duration: 3000
    });
});

Спасибо за любые предложения!

1 Ответ

0 голосов
/ 24 января 2019

Вы рядом. Также необходимо учитывать любую дополнительную высоту, необходимую для компенсации липкого заголовка (или просто для добавления дополнительного отступа), чтобы элемент не располагался вправо в верхней части окна браузера.

В этом примере у меня есть липкий заголовок. Так что мне нужно получить его высоту и расстояние, которое я хочу прокрутить. Также вы заметите, что я прокручиваю элемент body. Если вы пытаетесь нацелить элемент внутри другого, ознакомьтесь с документацией о том, как нацелить этот контейнер. 

$('a[href*="#"]').on('click', function (event) {
    event.preventDefault();

    let position = $($(this).attr("href")).offset().top;
    let headerHeight = $('header').outerHeight();
    let distance = (position - headerHeight);

    $('body').velocity('scroll', {
        duration: 3000,
        offset: distance,
        easing: 'easeOutQuart',
        complete: function () {
            // done.
        }
    });
});

Примечание

Используемое здесь замедление поставляется в комплекте с Velocity. Надеюсь, это поможет!

...