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>

单击滚动到div（在中心屏幕上显示div）

2 个答案: