Question

我有一个按钮（在我的情况下是样式为按钮的锚标签），我正在使用jQuery来监听click事件。

单击按钮时，如何平滑滚动到目标？

这是我到目前为止所拥有的：

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

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

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

谢谢您的任何建议！

Answer 1

您很近。还需要考虑的是补偿粘性标头（或仅添加额外的填充）所需的任何其他高度，以使元素在浏览器窗口顶部不是 right 。

在此示例中，我有一个粘性标头。因此，我需要获取它的高度以及要滚动的距离。另外，您会注意到我正在滚动body元素。如果您要定位另一个元素的内部元素，请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预先包装有Velocity。希望这会有所帮助！

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

1 个答案: