单击滚动到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标头中。 当用户滚动到#contactform时 ，此联系表单div的一部分在此标题后面。

我正在寻找一种滚动到#contactform的方法 。 但是，我不想一直滚动，而是要滚动到距离浏览器窗口顶部一定距离的像素为止，这样它将显示在标题下方而不是其下方。

我希望有人能帮助我！ 在此先感谢。

Elmigo

Answer 1

您想从滚动距离中减去粘性标头的高度，如下所示（ #fixed-header是粘性标头的ID）：

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

Answer 2

您可以减去标题的高度，以便滚动将停止几像素，然后内容才会为标题留出一些空间

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