如何使用 Velocity.js 平滑滚动到某个元素？

Question

我有一个按钮（在我的例子中是一个样式为按钮的锚标记），我正在使用它 jQuery 来侦听点击事件。

当我点击按钮时，如何平滑滚动到目标？

这是我目前的情况：

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

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

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

感谢您的任何建议！

Answer 1

你很接近。还需要考虑的是需要任何额外的高度来补偿粘性 header（或者只是添加额外的填充），这样元素就不会 right 在浏览器的顶部window.

在这个例子中，我有一个粘性 header。所以我需要得到它的高度以及我想要滚动的距离。此外，您会注意到我正在滚动 body 元素。如果您尝试定位另一个元素 inside，check out the documentation 了解如何定位该容器。

$('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.
        }
    });
});

备注

这里使用的easing是pre-packagedwith Velocity。希望这对您有所帮助！

如何使用 Velocity.js 平滑滚动到某个元素？

How can I use Velocity.js to smooth scroll to an element?

jquery

velocity.js