带有正文边距问题的 ScrollTop答案

【问题标题】：ScrollTop with body margin issue带有正文边距问题的 ScrollTop
【发布时间】：2018-10-04 19:13:52
【问题描述】：

我正在尝试使用 scrolltop 功能，但它在距离窗口顶部 67 像素处停止...

我设置了 67 像素的边距以抵消位于全屏横幅图像上方的导航栏。导航栏也有点透明所以需要边距，如下...

body {
  margin-top: 67px;
}

还有下面的脚本...

<script>
$(document).ready(function(){
   $(".navbar a, footer a[href='#MyPage']").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      },900, function(){   
        window.location.hash = hash;
      });
    } // End if
  });
</script>

body 标签看起来像这样...

<body id="MyPage" data-spy="scroll" data-target=".navbar" data-offset="60">

滚动效果很好，但停止了我认为距页面顶部 67 像素的位置，这似乎很明显这是我的边距以抵消导航栏的深度，但我该如何克服这个问题？

我已尝试将 +67 添加到以下行，但这无济于事...

scrollTop: $(hash).offset().top+67

欢迎任何想法。

谢谢

【问题讨论】：

如果 body 正在滚动，并且 margin 在 body 上，记住 margin 在元素之外，这一切都是有道理的。你可以试试margin:0; padding-top:67px 吗？
完美！非常感谢……有时你只见树木不见森林。那为什么 .top+67 不起作用？

标签： javascript jquery

【解决方案1】：

以下确实解决了我的问题，感谢 Niet the Dark Absol

margin:0; padding-top:67px

【讨论】：