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

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

在这里，您将获得距离-75像素偏移

    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
    });
});