如何使用 jQuery 和 Native JavaScript 实现锚链接的平滑滚动？

使用锚链接实现平滑滚动

使用锚链接将用户引导至网页的特定部分时，流畅的滚动体验可以增强用户的可访问性和参与度。 jQuery 提供了内置功能来实现此效果。

jQuery 技术

要使用 jQuery 启动平滑滚动，请使用以下代码：

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

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

本机方法（现代）浏览器）

现代浏览器现在支持锚链接的本机平滑滚动。使用以下代码实现此行为：

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

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

其他注意事项

无 ID 属性： 如果目标元素缺少 ID 属性但由名称标识，请使用此代码：

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

    return false;
});

性能优化：缓存文档根选择器以提高性能：

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

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

    return false;
});

URL 更新： 要在滚动期间更新 URL，请使用此回调：

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;
});

以上是如何使用 jQuery 和 Native JavaScript 实现锚链接的平滑滚动？的详细内容。更多信息请关注PHP中文网其他相关文章！