使用Javascript自動將頁面滾動到指定位置
下面我們就來講解一下如何使用Javascript自動將頁面滾動到指定位置。
指定需要滾動的位置
這一步很簡單,就是需要給滾動到指定位置的元素加上id屬性,如下:
天一廣場
使用Javascript自動將頁面滾動到指定位置
腳本如下:
這就完成了我們的需求,經測試兼容所有主流瀏覽器。
我也查閱了網上的一些資料,有的朋友說還有如下方式實現:
我也對上面的方法進行了測試,發現使用javascript中的window.scrollBy()存在一個問題:每刷新一次頁面,滾動距離頂部的高度都會比上次遞增我們定義的scroll_y值。
所以還是建議大家使用window.location.hash方法來自動將頁面滾動到指定位置。
<script type=”text/javascript”> $(function(){ window.location.hash = "#title"; }) </script>
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() 方法。
