首页 >web前端 >js教程 >如何使用 JavaScript 和 jQuery 实现锚链接的平滑滚动?

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

Linda Hamilton
Linda Hamilton原创
2024-12-10 08:57:11294浏览

How Can I Implement Smooth Scrolling for Anchor Links Using JavaScript and jQuery?

为锚链接创建平滑滚动

平滑滚动可增强使用锚链接在页面内导航时的用户体验。本文提供了两种实现此效果的方法:与现代浏览器兼容的本机方法和提供更广泛支持的 jQuery 实现。

现代浏览器的本机方法:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', (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 的元素,应使用此变体:

$('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 反映当前部分,请使用以下变体:

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

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn