添加偏移量以使用按钮使用导航栏平滑滚动

如何解决添加偏移量以使用按钮使用导航栏平滑滚动

您好，我尝试查找多个解决方案，例如我尝试过 target:before，但没有一个真正有效。我的想法是平滑滚动，偏移量为 -100px，这样我的固定标题就不会阻塞该部分的内容。我找到了这个使用 a href 作为参考的解决方案。

现在是否可以更改对 button 的引用，其 ID 为“content”？

$('a[href^="#"]').on('click',function (e) {

        var target = this.hash,$target = $(target);

    $('html,body').stop().animate({
        'scrollTop': $target.offset().top-100
        },900,'swing',function () {
            window.location.hash = target;
        });
});

我的其余代码：

html {
  scroll-behavior: smooth;
}

* {
  margin: 0 !important;
  padding: 0;
  font-family: helvetica;
}

body {
  height: 300vh;
}

#wrap {
  position: absolute;
  top: 400px;
}

#navbar {
  text-align: center;
  width: 100%;
  color: white;
  z-index: 999;
  transition: 0.3s;
  background-color: darkgray;
  position: fixed;
}

  <html>
  <nav id="navwrapper">
    <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="javascript/navbar fixed.js"></script>
    <div id="navbar" class="navbar navbar-dark bg-primary navbar-fixed-top selectSection">
      <h1 id="titel">HEADLINE</h1>
      <ul>
        <li class="nav-item"><button onclick="location.href='#wrap'" type="button" data-number="1" class="active navb">content1</button></li>
      </ul>
    </div>
  </nav>
 
  
  <div id="wrap" class="contentSection wrapper">
  <section id="content1" class="content" data-number="1">
    <div>
    content 1
    </div>
  </section>

解决方法

好的。谷歌搜索更多后，我发现 this codepen 使用 scroll-margin-top:; 对我有用！