我正在尝试在具有固定标题的网站上实现平滑滚动到内部锚点。
如果我这样做:
scrollTop: $target.offset().top
我在所有浏览器中都得到相同的结果,但如果我这样做:
scrollTop: $target.offset().top - 100
这在Webkit浏览器中是可以的,但在Firefox和IE中,滚动到锚点后,页面会进一步弹出,因此标题在标题下会被遮挡。
整个脚本:
$('[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
scrollTop: $target.offset().top - 100
}, 900, 'swing', function () {
window.location.hash = target;
});
});
和CodePen。
我找到了一个解决方法,改为在目标上添加填充顶部。