单击锚链接时平滑滚动

使用锚链接导航网页时，用户期望无缝过渡到目标部分。然而，默认的滚动行为可能会很突然。本文探讨了单击锚链接时实现平滑滚动的技术。

本机支持

Chrome 和 Firefox 等浏览器引入了对平滑滚动的本机支持。这是通过滚动到视图时使用值为“smooth”的“behavior”属性来实现的：

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

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

jQuery 插件

对于较旧的浏览器，jQuery 插件可以平滑滚动动画。该技术使用“animate”方法将页面移动到目标部分：

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

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

增强技术

如果目标元素缺少 ID，可以使用以下修改后的 jQuery 插件：

$('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 哈希

要在平滑滚动时更新 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;
});

通过实施其中一项技术，您可以在使用锚链接导航页面时提供精美且用户友好的滚动体验。