我有一个锚标记如下：
<a href="#map_4D85448A3D4C4180A02BD6FC387ABC45" onclick="jumptosection('map_4D85448A3D4C4180A02BD6FC387ABC45');">A Guide</a>字符串
它将导航到ID为“map_4D85448A3D4C4180A02BD6FC387ABC45”的部分。jumptosection函数如下所示：
function jumptosection(id) {
var target = document.getElementById(id);
if(document.all){
document.documentElement.scrollTop = target.offsetTop;
}else{
var top = 0;
do {
top += target.offsetTop || 0;
target = target.offsetParent;
} while(target);
document.body.scrollTop = top ;
}
//$('#article').css.paddingTop = '55px';
return false;型
但是即使我在这个函数中什么都不写，行为仍然是一样的。问题是，当我点击给定的锚时，我有一个92 px的标题带，它隐藏了部分区域的一部分。我如何让它滚动到给定的区域，同时添加一些像素来转义标题？
3条答案
按热度按时间zqry0prt1#
虽然所选择的答案可以达到目的，但我们现在有了显式的CSS属性，称为
scroll-margin。基本上，你可以通过添加不必要的元素来避免任何欺骗--当你通过锚标记导航时（或者如果你已经设置了原生css滚动捕捉-https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts），这个边距只是计算出来的。
在CSS变量中使用这个非常有用。这里有一个例子，如果你有一个固定/粘性的头：
字符串
MDN密码：https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin
CSS技巧指南：https://css-tricks.com/almanac/properties/s/scroll-margin/
64jmpszr2#
这是可能的。我会做它没有JavaScript，所以它适用于所有。甚至不需要对你的JS的变化。
你只需要在你想要滚动到的元素上方创建一个空元素。CSS就能做到这一点。它在你偏移的高度处创建一个隐藏框：
超文本标记语言：
字符串
CSS：
型
在这里查看一个工作演示：https://jsfiddle.net/eczxm1rs/1/
um6iljoc3#
我也有同样的问题，并通过在所需的元素中使用scroll-mt-[100 px]（Tailwind）或scroll-margin-top：100 px;（纯css）来解决它。
此外，滚动到特定元素不需要函数。想象一下，你想要这样：单击按钮，页面跳转到页面的特定元素。只需将按钮 Package 在**
<Link>或<a>**标记中，并带有#ID_OF_RESERVED_ELEMENT的href。就是这样！