滚动页面到 div答案

【问题标题】：scroll page to div滚动页面到 div
【发布时间】：2016-03-30 08:54:03
【问题描述】：

我需要滚动到 div，但滚动后我不需要 div 位于页面顶部

我需要它在页面中我如何做到这一点页面的中心。

我看到许多问题使滚动正确，但到页面顶部我需要它滚动但使 div 位于页面的 center。

我已经尝试过了，但是这会将它滚动到页面顶部

$('html,body').animate({
    scrollTop: $("#"+div).offset().top},
'slow');

谢谢

How to scroll to specific item using jQuery? 滚动到 div 但使其位于页面顶部而不是中心

【问题讨论】：

我不认为它是重复的。他知道如何滚动到一个项目，他想修改确切的滚动量，以便项目位于窗口的中心（“滚动到视图”）而不是窗口的顶部（“滚动到顶部”）跨度>
正是我需要它将 div 滚动到页面中心而不是顶部
那你需要加上一半的窗口高度，减去一半的div高度。

标签： javascript jquery

【解决方案1】：

为了使 div 在滚动后在窗口中居中，您需要：

查询浏览器的窗口高度（这个可行）
查询 div 的高度（这是可行的，但需要小心：高度并不总是准确计算的）
从第 1 行减去第 2 行，然后除以 2
将第 3 行的结果添加到您的 top 值中

注意：当你的 div 比浏览器窗口高时，它仍然会居中，但 div 的顶部会离开屏幕！

【讨论】：

我认为这在逻辑上是正确的 :) 感谢您的时间我的朋友
实际上在逻辑上是完美的。刚刚看到我们发布了相同的答案。 +1。英雄所见略同。 =]
5 小时与 jQuery UI 的搏斗让我筋疲力尽，不想编写任何代码来做到这一点。

【解决方案2】：

这是一个以div2为中心的示例：https://jsfiddle.net/2mb44kfa/

HTML：

<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>

CSS：

#div1,
#div3 {
    height: 1000px;
}

#div2 {
    height: 100px;
    background: red;
}

JS：

var winHeight = $(window).height();
var divHeight = $("#div2").height();
var height = (divHeight - winHeight) / 2
$('html, body').animate(
    {
        scrollTop: ($("#div2").offset().top + height) + 'px'
    }, 'slow'
);

【讨论】：