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（红框的高度），为了看到红框，用户必须手动向上滚动。

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

的JavaScript

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

但这并不能满足我的需要，事实上，它使整个页面不可滚动 - 它确实向下滚动到150px，但只有当用户通过任何ammount手动滚动页面时，它才会卡在那里并赢得总而言之。

我不是最好的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));
});

Answer 2

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

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

或者更简单，将其放入<body＆gt;标签

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

Answer 3

Javascript是对的。已发布的建议应该可以正常使用，但Shankar会要求您首先包含任何库。

你在使用图书馆吗？例如jQuery，prototype等。你的第一个代码片段中的特殊字符表示一个库 - 如果你没有在文档中的那个脚本之前包含它，那么该脚本将不起作用。

另外，如果你很好奇：

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

到目前为止，网页加载已经滚动了

3 个答案: