小编典典

JavaScript单击锚点链接时平滑滚动

javascript

我的页面上有几个超链接。用户访问我的帮助部分时将阅读的常见问题解答。

使用锚点链接,我可以使页面滚动到锚点并在那里引导用户。

有没有办法使滚动平滑?

但是请注意,他正在使用自定义JavaScript库。也许jQuery提供了类似的功能?


阅读 657

收藏
2020-04-25

共1个答案

小编典典

现在有一种本地方法可以做到这一点:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

当前仅最先进的浏览器才支持此功能。


对于较旧的浏览器支持,可以使用以下jQuery技术:

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

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});

如果您的目标元素没有ID,并且您正在通过ID链接到它name,请使用以下命令:

$('a[href^="#"]').click(function () {
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    }, 500);

    return false;
});

为了提高性能,您应该缓存该$('html, body')选择器,以便它不会在 每次 单击定位器时都运行:

var $root = $('html, body');

$('a[href^="#"]').click(function () {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);

    return false;
});

如果您希望更新URL,请在animate回调中进行操作:

var $root = $('html, body');

$('a[href^="#"]').click(function() {
    var href = $.attr(this, 'href');

    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });

    return false;
});
2020-04-25