如何在我的网站中实现锚链接的平滑滚动？

通过平滑滚动增强锚链接导航

平滑滚动可以显着改善使用锚链接浏览网页时的用户体验。通过消除不和谐的跳转并提供无缝过渡，您可以增强页面的可访问性和整体美观性。

使用本机 JavaScript

主要浏览器的最新版本现在支持锚链接的本机平滑滚动。您可以使用以下代码实现此功能：

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', e => {
    e.preventDefault();
    document.querySelector(anchor.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
  });
});

jQuery 解决方案

对于较旧的浏览器兼容性，jQuery 提供了可靠的解决方案：

$(document).on('click', 'a[href^="#"]', event => {
  event.preventDefault();
  $('html, body').animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 500);
});

处理目标元素没有 ID

如果目标元素缺少 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, () => { window.location.hash = href; });
  return false;
});

通过结合这些技术，您可以为网站用户提供无缝且引人入胜的导航体验，使浏览页面内容成为一种乐趣。

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