anchor link直接到anchor偏移多少像素？

Question

我有一个带有浮动顶部导航栏的网页。我想将锚 link 添加到 table 的内容中，以便快速定向到页面上的其他位置。

#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>

当您单击 "click here" 时，我想要的结果是第一个 "b"（锚点指向的位置）出现在顶部浮动栏下方。相反，当您单击 "click here" 时，它会将第一个 "b" 带到页面顶部，被浮动条隐藏。

当我点击锚点 link 时，它指向锚点偏移 75px（例如，如果 <a> 距离顶部 200px，我点击锚点link，它会从顶部到 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
    });
});

anchor link直接到anchor偏移多少像素？

Anchor link direct to anchor offset by a number of pixels?

html

css

anchor