使用锚链接将用户引导至网页的特定部分时，流畅的滚动体验可以增强用户的可访问性和参与度。 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中文网其他相关文章！
