平滑滚动到锚点是指当用户点击页面内的链接时,页面不是立即跳转到目标位置,而是以动画效果平滑地滚动到指定位置,提供更好的用户体验。
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
var target = $(this).attr('href');
var offset = $(target).offset().top;
$('html, body').animate({
scrollTop: offset
}, 800); // 800ms是动画持续时间
});
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
var target = $(this).attr('href');
var offset = $(target).offset().top;
var navHeight = $('.navbar').outerHeight(); // 假设导航栏类名为.navbar
$('html, body').animate({
scrollTop: offset - navHeight
}, 800);
});
$(document).ready(function() {
$('a[href^="#"]').on('click', function(e) {
// 防止默认跳转行为
e.preventDefault();
// 获取目标元素
var target = $(this).attr('href');
// 检查目标元素是否存在
if($(target).length) {
// 计算目标位置
var offset = $(target).offset().top;
var navHeight = $('.navbar').outerHeight() || 0;
var finalOffset = offset - navHeight;
// 执行平滑滚动
$('html, body').stop().animate({
scrollTop: finalOffset
}, 800, 'swing', function() {
// 动画完成后更新URL(不刷新页面)
window.location.hash = target;
});
}
});
});
.stop()
方法清除动画队列$(window).on('load', function() {
if(window.location.hash) {
var target = window.location.hash;
if($(target).length) {
var offset = $(target).offset().top;
var navHeight = $('.navbar').outerHeight() || 0;
$('html, body').scrollTop(offset - navHeight);
}
}
});
scroll-behavior: smooth
属性,可以简化实现,但浏览器兼容性较差没有搜到相关的沙龙