本文轉自: http://www.phpfuns.com/scripts/javascript/javascript-auto-scroll.shtml
昨天一個朋友問我如何在頁面載入完成後,自動將頁面定位到某個位置,當時有些忙,就沒來得及解決。殊不知今天在做PHP教程的項目中也有了同樣的需求:為了頁面美觀,需要只顯示使用者從樓盤相簿點擊後進入的相簿幻燈頁面的樓盤資訊(也就是自動定位到了樓盤的相關資訊,忽略了頂部banner)。如所示:
使用Javascript自動將頁面滾動到指定位置
下面我們就來講解一下如何使用Javascript自動將頁面滾動到指定位置。
指定需要滾動的位置
這一步很簡單,就是需要給滾動到指定位置的元素加上id屬性,如下:
<span id="title" class="title">天一廣場</span>
使用Javascript自動將頁面滾動到指定位置
指令碼如下:
<script type=”text/javascript”>$(function(){ window.location.hash = "#title";})</script>
這就完成了我們的需求,經測試相容所有主流瀏覽器。
我也查閱了網上的一些資料,有的朋友說還有如下方式實現:
<script type="text/javascript">function scrollwin() {var scroll_y = parseInt(1000);window.scrollBy(0, scroll_y);}</script>
我也對上面的方法進行了測試,發現使用javascript中的window.scrollBy()存在一個問題:每重新整理一次頁面,滾動距離頂部的高度都會比上次遞增我們定義的scroll_y值。
所以還是建議大家使用window.location.hash方法來自動將頁面滾動到指定位置。
window.location 對象屬性介紹:
Location 對象屬性
屬性 |
描述 |
IE |
F |
O |
hash |
設定或返回從井號 (#) 開始的 URL(錨)。 |
4 |
1 |
9 |
host |
設定或返回主機名稱和當前 URL 的連接埠號碼。 |
4 |
1 |
9 |
hostname |
設定或返回當前 URL 的主機名稱。 |
4 |
1 |
9 |
href |
設定或返回完整的 URL。 |
4 |
1 |
9 |
pathname |
設定或返回當前 URL 的路徑部分。 |
4 |
1 |
9 |
port |
設定或返回當前 URL 的連接埠號碼。 |
4 |
1 |
9 |
protocol |
設定或返回當前 URL 的協議。 |
4 |
1 |
9 |
search |
設定或返回從問號 (?) 開始的 URL(查詢部分)。 |
4 |
1 |
9 |
Location 對象方法
屬性 |
描述 |
IE |
F |
O |
assign() |
載入新的文檔。 |
4 |
1 |
9 |
reload() |
重新載入當前文檔。 |
4 |
1 |
9 |
replace() |
用新的文檔替換當前文檔。 |
4 |
1 |
9 |
History 對象
History 對象包含使用者(在瀏覽器視窗中)訪問過的 URL。
History 對象是 window 對象的一部分,可通過 window.history 屬性對其進行訪問。
History 對象屬性
屬性 |
描述 |
IE |
F |
O |
length |
返回瀏覽器曆史列表中的 URL 數量。 |
4 |
1 |
9 |
History 對象方法
方法 |
描述 |
IE |
F |
O |
back() |
載入 history 列表中的前一個 URL。 |
4 |
1 |
9 |
forward() |
載入 history 列表中的下一個 URL。 |
4 |
1 |
9 |
go() |
載入 history 列表中的某個具體頁面。 |
4 |
1 |
9 |
History 對象描述
History 對象最初設計來表示視窗的瀏覽曆史。但出於隱私方面的原因,History 對象不再允許指令碼訪問已經訪問過的實際 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。