html js點擊按鈕滾動跳轉定位到頁面指定位置(DIV)的方法代碼

一:經過html錨點實現滾動定位到頁面指定位置(DIV):
    若是咱們要點擊實現跳轉的地方是一個html錨點,也就是點擊一個A標籤超連接實現跳轉,能夠把A標籤的href屬性直接指向跳轉指定位置的div,代碼實現思路以下:javascript

<a class="banner" href="/schoolFair/registration#nav">

    <a href="#abc">點擊跳轉</a>
    <div id="abc">將要跳轉到這裏</div>html

二:經過點擊button按鈕使用js實現滾定跳轉到頁面指定位置(DIV):
    若是咱們要點擊實現跳轉的地方是一個button按鈕的話,因爲button不能添加href,因此咱們只好使用js跳轉代碼來實現,具體代碼示例以下:
    <script>
    function onTopClick() {
         window.location.hash = "#abc";
       }
    </script>
    <input  type="button" name="Submit" value="提交"  onclick="javascript:onTopClick();" />
    <div id="abc">跳轉到的位置</div>
    上面這段代碼,點擊提交按鈕,將會滾定跳轉定位到同一頁面id="abc"的div處。這段js點擊跳轉頁面代碼實現的原理是:頁面各元素賦予惟一ID,點擊提交按鈕觸發js點擊事件,js經過ID滾動跳轉定位到該元素,window.location.hash = "#abc"指的就是定位到當前頁面id="abc"的div。java

 

綜:window.location.href表示重定向,後面跟着的是完整的url地址,與其類似的還有window.location.hash,url

下面來比較window.location.href和window.locaiton.hash的區別。code

(1)window.location.hrefhtm

                獲得和使用的是完整的url,好比window.location.href="www.baidu.com」表示的是從新定向,頁面跳轉事件

到新的頁面。也能夠經過window.location.href獲得a標籤的完整的href,好比<a href="#book">若是使用href,那ip

麼能夠獲得完整的連接(url)input

       (2)window.location.hashhash

               獲得的是錨連接。相好比href,經過window.location.hash並不會跳轉到新的連接,只會在當前連接裏面

改變錨鏈。而且若是有<a href="#book">經過window.location.hash得不到完整的連接(URL),僅僅獲得#book.

相關文章
相關標籤/搜索