Javascript 在JS浏览器中键入url时偏移哈希标记链接以调整固定标题

我希望创建一个页面，允许散列标签跳转到页面的某些内容

e、 g

这是一个正常的页面

将跳转到id为

#info

这是默认的浏览器行为，因此没有问题

当我有一个固定的浏览器标题时，问题就开始了，因为我需要一些额外的偏移量，这样固定的标题就不会覆盖元素

对于页面上的内部链接，这不是问题，因为我只使用以下代码：

var scrollOffset = 175;
$('a.tab-button[href^="#"]').on('click', function(event) {
    var $target = $(targetId);
    console.log($(this).attr('href'));

    if( $target.length ) {
        event.preventDefault();
        window.scrollTo(0, $target.offset().top - scrollOffset);
    }
})

其中

scrollOffset

是我希望将其偏移的像素数

但是，问题在于在浏览器中键入url并单击enter（就像直接单击页面上的url锚定标记一样）。尽管它可以正确地滚动到元素；浏览器窗口和图元之间没有偏移，导致其隐藏在固定导航栏下

注：我已经知道以下技术：

h2:before { 
  display: block; 
  content: " "; 
  margin-top: -285px; 
  height: 285px; 
  visibility: hidden; 
}

和其他CSS技巧

---

所以请只给JS答案

以下方法似乎有效。

gotoHash（）

函数基本上与现有代码相同，只是它在一个超时时间内，这使得

event.preventDefault（）

不必要。这也解决了当函数在文档就绪后但在浏览器滚动到哈希之前运行时的问题：

location.hash='#d3'//仅用于演示目的
函数gotoHash（id）{
setTimeout（函数（）{
变量$target=$（id），
scrollOffset=100，
y=$target.offset（）.top-scrollOffset；
如果（$target.length）{
滚动到（0，y）；
}
});
}
$（'a[href^=“#“]”）。在（'click'，function（）上{
gotoHash（$（this.attr（'href'））；
});
$（文档）.ready（函数（）{
gotoHash（location.hash）；
});
正文{
字体：12px verdana；
利润率：100px 0px；
}
标题{
高度：100px；
背景：黄色；
边框：1px纯色灰色；
位置：固定；
排名：0；
宽度：100%；
}
div{
高度：1000px；
}









知识是一种美德，是一种美德，是一种美德，是一种美德。
但是，在最低限度上，我们需要一个实验室来进行日常工作。
两人或两人在一个无教区的房间里互相指责。
除了偶尔出现的不自以为是的情况外，其他情况都是因为工作上的过失而导致的。
所以根据我的理解，问题是，当用户键入#标记时，页面会被加载，但页面不会滚动到第节。如果是这种情况，您可以编写一个加载函数，从url读取#标记，并触发必要的“a”标记的单击功能。否，它会滚动到该部分。问题在于图元和浏览器窗口之间没有偏移。我将修改这个问题使它更清楚。