我目前正在尝试找到一种方法来使网站加载并已经向下滚动。
例如...
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
$(window).scroll(function(event) {
window.scrollTo(0,150);
});
但这并不能满足我的需要，事实上，使整个页面无法滚动 - 它确实向下滚动到 150px，但仅当用户手动滚动页面任意量时，然后它就会卡在那里并且根本不会滚动。
我不是最擅长 JavaScript...我认为我的问题可能与该部分有关
$(window).scroll(function(event) {
});
。正如我所想的那样，
window.scrollTo(0,150);
这就是我真正想要它做的事情。但我只是在这里猜测，我似乎根本无法让它发挥作用。
我创建了一个 JSFiddle 来尝试更清晰地演示。
谁能帮助我吗？
I'm currently trying to figure a way to make a website load up and already be scrolled so far down.
For example...
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>
Is there anyway I can make the webpage already be scrolled down far enough to make the red-box div already be off the top of the page. In other words, the page has already scrolled down 150px (the height of the red-box) when it loads up and in order to see the red-box, the user would have to manually scroll back up.
I've tried several JavaScripts but the only one that came remotely close to sort of working was...
JavaScript
$(window).scroll(function(event) {
window.scrollTo(0,150);
});
But that does not do what I need and, in fact, makes the whole page unscrollable- It does scroll down to 150px, but only when the user manually scrolls the page by any ammount, and then it gets stuck there and won't scroll at all.
I'm not the greatest at JavaScript... I think my problem might have something to do with the
$(window).scroll(function(event) {
});
section. As I think
window.scrollTo(0,150);
is what I actually want it to do. But I'm just guessing here and I can't seem to get it to work at all.
I've created a JSFiddle to try and demonstrate a bit clearer.
Can anyone help me?
发布评论
评论（3）
您在每个您不想要的滚动事件上将滚动位置设置为 0(,150) 。您应该仅在页面加载时执行此操作。将其更改为此代码。
要使其完美滚动到红色框，请使用此代码。
offset()方法给出元素相对于文档的顶部/左侧位置。You are setting scroll position to 0(,150) on every scroll event which you don't want. You should do it only on page load. Change it to this code.
To make it perfectly scroll to the red box use this code.
offset()method gives the top/left position of the element relative to the document.JavaScript 是对的。已经发布的建议应该可以正常工作，但 Shankar 会要求您首先包含任何库。
你在使用图书馆吗？例如 jQuery、prototype 等。第一个代码片段中的特殊字符表示一个库 - 如果您在文档中的该脚本之前没有包含它，则该脚本将无法工作。
另外，如果您好奇的话：
$(window)将 window 对象带入库的范围。.scroll表示方法，(function(event) { });是回调。Javascript is right. The suggestions already posted should work fine, except Shankar's would require you include whatever library first.
Are you using a library? Such as jQuery, prototype, etc. The special characters in your first code snippet denote a library - if you haven't included it before that script in the document, that script won't work.
Also, in case you were curious:
$(window)brings the window object into the scope of the library..scrolldenotes the method and(function(event) { });is a callback.您可以将
scrollTo()方法包装在自调用的匿名函数中，以便它自动执行，而无需实例化 jQuery 对象。(function() { window.scrollTo(0,150); })();或者更简单，将其放入您的> 中标签。
You could wrap your
scrollTo()method in a self-invoked anonymous function so that it auto executes without the need for instanciating a jQuery object.(function() { window.scrollTo(0,150); })();Or simpler yet, put it in your
<body> tag.<body onload="window.scrollTo(0,150);">