javascript - 单击滚动到 div(在中心屏幕上显示 div)

Question

我有一个关于放在页面底部的小 JS 的问题。当用户单击一个 div 时，脚本会滚动到另一个 div。在我的网站上有一个联系按钮(如下例)。

<div id="contactbutton"></div>

当网站的用户点击这个 div 时，页面向下滚动到页面上的另一个 div，上面有一个联系表单(如下例)。

<div id="contactform">
  <form>
    (form content here)
  </form>
</div>

我在页面底部使用了以下 JS 代码，它会滚动到另一个 div:

<script>
  $("#contactbutton").click(function() {
  $('html, body').animate({
  scrollTop: $("#contactform").offset().top
  }, 500);
  });
</script>

代码运行完美，但问题是我的网站上有一个固定的 div header ，该 header 位于页面上所有内容的顶部。当用户滚动到 #contactform 时，此联系表 div 的一部分位于此标题后面。

我正在寻找一种滚动到#contactform 的方法。但是我不想一直滚动，而是希望它滚动到距浏览器窗口顶部一定数量的像素，这样它就会显示在标题下方而不是标题后面。

希望有人能帮帮我!提前致谢。

埃尔米戈

Answer 1

您想从滚动距离中减去粘性 header 的高度，如下所示(#fixed-header 是粘性 header 的 id):

<script>
  $("#contactbutton").click(function() {
    $('html, body').animate({
      scrollTop: $("#contactform").offset().top - $('#fixed-header').outerHeight()
    }, 500);
  });
</script>