html - anchor 链接直接指向偏移了多个像素的 anchor ？

Question

我有一个带有 float 顶部导航栏的网页。我想将 anchor 链接添加到目录以快速定向到页面上的其他位置。

#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”( anchor 指向的位置)出现在顶部 float 栏下方。相反，当您单击“单击此处”时，它会将第一个“b”带到页面顶部，隐藏在 float 栏中。

当我单击 anchor 链接时，它如何指向偏移了 75px 的 anchor (例如，如果 <a> 距顶部 200px，然后我单击 anchor 链接，它将变为 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
    });
});