jquery - 加载的网页已经向下滚动了很远

Question

我目前正在尝试找到一种方法来使网站加载并已经向下滚动。

例如...

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);
});

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

我不是最擅长 JavaScript...我认为我的问题可能与

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

部分。正如我所想

   window.scrollTo(0,150);

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

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

有人可以帮助我吗？

Answer 1

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

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

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

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