Javascript自動將頁面滾動到指定位置

來源:互聯網
上載者:User

本文轉自: 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() 方法。

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.