有一个网页加载已滚动到目前为止

我目前正在试图找出一种方式来使网站加载并已滚动到目前为止。有一个网页加载已滚动到目前为止

例如...

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，但只有当用户手动滚动页面的任何ammount时，然后它卡在那里，并不会滚动。

我不是最伟大的，在JavaScript的...我想我的问题可能有一些做的

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

部分。因为我认为

window.scrollTo(0,150);

是我真正希望它做的事情。但我只是在这里猜测，我似乎无法让它工作。

我创建了一个JSFiddle来尝试和演示更清晰一点。

任何人都可以帮助我吗？

来源

2012-01-26 Flickdraw

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

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

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

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

来源

2012-01-26 02:02:29 ShankarSangoli

谢谢！它现在工作完美！ – Flickdraw

你可以在自调用匿名函数，使其自动执行，而不需要instanciating一个jQuery对象包装你scrollTo()方法。

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

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

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

来源

2012-01-26 02:03:23 65Fbef05

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

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

此外，如果你是好奇：

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

来源

2012-01-26 02:05:17 OpenSorceress

感谢您的信息。我很难完全掌握这一切。我有一个JQuery库，所以它现在都工作了！ – Flickdraw

有一个网页加载已滚动到目前为止

回答

相关问题