将页面滚动到div

Question

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

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

我看到许多问题使得滚动正确但是在页面顶部我需要滚动但在页面的中心中创建div。

我已尝试过此功能，但这会将其滚动到页面顶部

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

感谢

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

Answer 1

为了让滚动后窗口中的div 居中，您需要：

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

注意：如果您的div 更高而不是浏览器窗口，它仍然会居中，但div的顶部将不在屏幕上！

Answer 2

以下是#FF0000：https://jsfiddle.net/2mb44kfa/

的中心示例

HTML：

div2

CSS：

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

JS：

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

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