滚动页面到 div

Posted 2023-03-10

【中文标题】滚动页面到 div

【英文标题】：scroll page to 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高度。

【参考方案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'
);