让网页加载已经向下滚动答案

【问题标题】：Have a webpage load up already scrolled so far down让网页加载已经向下滚动
【发布时间】：2012-01-26 01:54:54
【问题描述】：

我目前正在尝试想办法让网站加载并已经向下滚动。

例如...

CSS

body {
height:2000px;  
}

#red-box {
position:absolute;
width:100%;
height:150px;
background-color:red;
}

#blue-box {
position:absolute;
width:100%;
height:500px;
margin-top:150px;
background-color:blue;
}

HTML

<div id="red-box"></div>
<div id="blue-box"></div>

无论如何我可以使网页已经向下滚动到足以使红框 div 已经离开页面顶部。换句话说，页面加载时已经向下滚动了 150px（红框的高度），为了看到红框，用户必须手动向上滚动。

我已经尝试了几个 JavaScript，但唯一一个远程接近工作的 JavaScript 是......

JavaScript

$(window).scroll(function(event) {
   window.scrollTo(0,150);
});

但这并不能满足我的需要，事实上，这会使整个页面无法滚动——它确实向下滚动到 150 像素，但只有当用户手动滚动页面任意数量时，它才会卡在那里并获胜根本不滚动。

我在 JavaScript 方面不是最出色的...我认为我的问题可能与

$(window).scroll(function(event) {
});

部分。和我想的一样

   window.scrollTo(0,150);

是我真正想要它做的。但我只是在这里猜测，我似乎根本无法让它发挥作用。

我创建了一个JSFiddle 来尝试更清楚地演示。

谁能帮帮我？

【问题讨论】：

标签： jquery scroll scrollto

【解决方案1】：

在您不想要的每个滚动事件上，您都将滚动位置设置为 0(,150)。您应该只在页面加载时执行此操作。改成这段代码。

$(function() {
   window.scrollTo(0,150);
});

要使其完美滚动到红色框，请使用此代码。 offset() 方法给出了元素相对于文档的顶部/左侧位置。

$(function(){
   window.scrollTo(0, $('#red-box').offset().top));
});

【讨论】：

【解决方案2】：

Javascript 是对的。已经发布的建议应该可以正常工作，除了 Shankar 要求您首先包含任何库。

你在使用图书馆吗？例如 jQuery、原型等。您的第一个代码中的特殊字符 sn-p 表示一个库 - 如果您没有在文档中的该脚本之前包含它，则该脚本将不起作用。

另外，如果你好奇的话：

$(window) 将窗口对象带入库的范围。 .scroll 表示方法，(function(event) { }); 是回调。

【讨论】：

感谢您的信息。我很难掌握这一切。我有一个 JQuery 库，所以现在一切正常！

【解决方案3】：

您可以将您的 scrollTo() 方法包装在一个自调用的匿名函数中，以便它自动执行而无需实例化 jQuery 对象。

(function() { window.scrollTo(0,150); })();

或者更简单，把它放在你的<body>标签中。

<body onload="window.scrollTo(0,150);">

【讨论】：