Javascript 尝试在单击锚定链接时聚焦于特定div

我正试图通过点击锚定链接将注意力集中在一个特定的div上。 这是密码

<a href="somepage.html#divname">Link</a>

我面临一个问题，视图是从不同的局部视图（如页眉页脚等）渲染的。 标题包含从另一个视图指向特定div的链接，并且有一个粘性导航条。当我点击导航栏上的链接时，它会聚焦在div上。但是div的某些部分隐藏在标题导航栏后面。 从用户界面的角度来看，这看起来很笨拙。 以下是导航条形码：

  <nav><li><a href="somepage.html#divname">Link</a></li></nav>

page div的示例代码可以是

  <div id="divname">Some Content</div>

一些内容

---

请给我一个线索，我如何才能让div显示在粘性菜单栏下方

试着给你想点击的div加上一些页边空白，这样导航栏就不会隐藏你的div，然后更改你的href

href="somepage.html#divname" 

到

---

只是。始终为HTML中的元素提供唯一的ID或类，以便机器不会混淆它们，并以相同的方式处理两个不同的元素。希望这对你有用。如果没有，请发布帮助回复。

StackOverflow上有很多类似的问题。试试这个例子：

可以使用以下设置将伪元素（：：before）添加到CSS中的链接元素中。这将在链接图元上方创建一个不可见的块，该块将再次为链接图元位置创建偏移，因为该伪图元的顶部实际上是链接锚点的位置

一些内容

您可以在

#divname

中添加一个与导航栏高度相等的填充顶部，这样文本将立即可见。如果您只想使用css和html，您可以为div指定一个与导航栏高度相等的填充顶部，如上述注释所述。否则，您可以使用js通过添加顶部渲染来创建一些额外的空间来实现这一点。这不会重置。我认为这不是一个好方法。你能给我看一些示例代码，让它向上滚动到一定的百分比吗。填充顶部不会返回良好的结果。我尝试了边距顶部，但这也确实在元素之间创建了一个空间，这个空间非常满。我想要一个全面的用例来处理这个问题。不要给太多的边际尝试“边际顶端：105px”；或者相应地，这样它就不会破坏你的UI。不幸的是，没有全面地解决我的问题。你是什么意思？也许我仍然可以帮助你，正如我在前面的回答中所说的。设置padding和margin top只会创建不需要的空间。如果您可能知道Javascript ScrollTop（）的代码示例，请给我看一下。

href="#divname" 

.anchor_offset::before {
  display: block;
  content: ' ';
  height: 10em; // Whatever height your navbar is
  margin-top: -10em; // Whatever height your navbar is
  width: 100%;
  visibility: hidden;
}

<div id="divname" class="anchor_offset">Some Content</div>