Javascript 单击时滚动至div（在中央屏幕上显示div）

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

当网站用户单击此div时，页面向下滚动到页面上的另一个div，并在其上显示联系人表单（示例如下）

（此处为表格内容）

我使用页面底部的以下JS代码完成了此操作，该代码将滚动到另一个div：

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

$（“#contactbutton”）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（“#contactform”）.offset（）.top
}, 500);
});

代码工作得很完美，但问题是我的网站上有一个固定的div头，它位于页面上所有内容的顶部。当用户滚动到#contactform时，此contact form div的一部分位于此标题后面

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

我希望有人能帮助我！事先多谢

---

Elmigo

您想从滚动距离中减去粘性页眉的高度，类似这样（

#fixed header

是粘性页眉的id）：

$（“#contactbutton”）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（“#contactform”）.offset（）.top-$（“#固定标题”）.outerHeight（）
}, 500);
});

您想从滚动距离中减去粘性标题的高度，类似这样（

#fixed header

是粘性标题的id）：

$（“#contactbutton”）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（“#contactform”）.offset（）.top-$（“#固定标题”）.outerHeight（）
}, 500);
});

您可以减去页眉的高度，这样在内容为页眉留出一些空间之前，滚动将停止几个像素

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

$（“#contactbutton”）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（“#contactform”）.offset（）.top-$（“#页眉”）.height（）
}, 500);
});

您可以减去页眉的高度，这样在内容为页眉留出一些空间之前，滚动将停止几个像素

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

$（“#contactbutton”）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（“#contactform”）.offset（）.top-$（“#页眉”）.height（）
}, 500);
});

太好了，非常感谢！但是有没有办法减去一定数量的像素，而不是头div的高度？或者考虑到所有不同的浏览器大小（移动设备等），这会是一个棘手的事情吗？也可以考虑，也许有一天你改变了页眉的高度…在这种情况下，一个固定的数字是没有帮助的…太好了，非常感谢！但是有没有办法减去一定数量的像素，而不是头div的高度？或者考虑到所有不同的浏览器大小（移动设备等），这会是一个棘手的事情吗？也可以考虑，也许有一天你改变了页眉的高度…在这种情况下，一个固定的数字是没有帮助的…减法是一个很好的解决方案，谢谢！我想知道是否可以减去一定数量的像素？

scrollTop:$（“#contactform”）.offset（）.top-100

-使用所需的像素数，而不是

100

。这很简单！对不起，我不太喜欢编码。非常感谢。减法是一个很好的解决方案，谢谢！我想知道是否可以减去一定数量的像素？

scrollTop:$（“#contactform”）.offset（）.top-100

-使用所需的像素数，而不是

100

。这很简单！对不起，我不太喜欢编码。非常感谢。

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

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