单击锚链接时平滑滚动
在使用锚链接导航网页时，用户期望无缝过渡到目标部分。然而，默认的滚动行为可能会很突然。本文探讨了单击锚链接时实现平滑滚动的技术。
本机支持
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;
});通过实施其中一种技术，您可以在使用锚链接导航页面时提供精美且用户友好的滚动体验。
以上是如何实现锚链接平滑滚动？的详细内容。更多信息请关注PHP中文网其他相关文章！
