如何实现锚链接平滑滚动？-js教程-PHP中文网

如何实现锚链接平滑滚动？

Mary-Kate Olsen

发布： 2024-12-16 22:42:18

原创

928 人浏览过

How Can I Implement Smooth Scrolling for Anchor Links?

通过锚链接实现平滑滚动

在帮助部分中合并常见问题解答的超链接是引导用户获取特定信息的常见方法。虽然锚链接可以使页面滚动到目标位置，但实现流畅的滚动体验可以增强用户交互。

本机和基于 jQuery 的解决方案

最新版本的浏览器现在支持平滑锚点滚动的本机解决方案。

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

    document.querySelector(anchor.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);
});

登录后复制

此外，jQuery 会处理目标元素没有 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;
});

登录后复制

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