有一個網頁加載已滾動到目前爲止

我目前正在試圖找出一種方式來使網站加載並已滾動到目前爲止。有一個網頁加載已滾動到目前爲止

例如...

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

有一個網頁加載已滾動到目前爲止

回答

相關問題