锚链接直接到锚偏移多个像素？

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而不是距离顶部 200 像素）？有没有无 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
    });
});