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

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

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

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

二：經過點擊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。

 

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

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

（1）window.location.href

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

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

麼能夠獲得完整的連接（url）

       （2）window.location.hash

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

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