锚链接直接锚定偏移了多个像素？

Question

我的网页上有一个浮动顶部导航栏。我想将锚链接添加到目录，以快速指向页面上的其他位置。

#top {
  display: flex;
  z-index: 100;
  background-color: rgba(20, 20, 20, 0.75);
  position: fixed;
  top: 0px;
  margin-left: auto;
  margin-right: auto;
  left: 0px;
  right: 0px;
  height: 75px;
}

#bottom {
  padding-top: 75px;
}

<div id="top">
  &nbsp;
</div>
<div id="bottom">
  <a href='#example'>Click Here</a>
  <br/>
  <br/> a
  <br/> a
  <br/> a
  <br/> a
  <br/> a
  <br/> a
  <br/> a
  <br/> a
  <br/> a
  <br/> a
  <br/> a
  <br/> a
  <br/> a
  <br/> a
  <br/> a
  <br/> a
  <br/> a
  <br/> a
  <br/> a
  <br/> a
  <br/> a
  <br/> <a id='example'></a> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
  <br/> b
</div>

当您点击“点击此处”时，我想要的结果是第一个“b”（锚点所在的位置）出现在顶部浮动栏的下方。相反，当您单击“单击此处”时，它会将第一个“b”带到页面顶部，由浮动条隐藏。

当我点击锚点链接时，如何指向锚点偏移量为75px（例如，如果<a>从顶部开始是200px并且我点击锚点链接，那么它会去从顶部到275px而不是200px）？有没有JS选项吗？

Answer 1

在这里，这将给你距离 - 75px偏移

    jQuery(document).ready(function() {
    jQuery("a").on('click', function(event) {
        if (this.hash !== "") {
            // Prevent default anchor click behavior
            event.preventDefault();
            var hash = this.hash;
            jQuery('html, body').animate({
                scrollTop: jQuery(hash).offset().top - 75
            }, 1200, function() {
                window.location.hash = hash;
            });
        } // End if
    });
});