js怎麼實作滑鼠點擊目前頁面某處後跳到指定div部位？

在網站建置過程中，有時會需要做一個這樣的功能，在目前頁面內滑鼠點擊某個位置就會直接移動到目前頁面的指定的另一個位置。其實這種功能對資深程式設計師來說肯定不是什麼難事，但是對於新手小白而言，卻有一定的難度，主要是不知從何下手。那麼這篇文章就跟大家介紹關於js跳到頁面指定div位置的兩種方法。

一、透過html錨點實現：
    如果我們要點選實現跳躍的地方是html錨點，也就是點選一個A標籤超連結實現跳轉，可以把A標籤的href屬性直接指向跳轉指定位置的div，程式碼範例如下：

<a href="#abc">点击跳转</a>
<div id="abc">将要跳转到这里</div>

注意：點擊上面A連結將會滾動跳到同一頁面中id="abc"的那個div處，需要注意的是跳轉指定位置div的id是唯一的，A標籤直接指向此id，id前面別忘了加上#號。

二、點擊button按鈕實現：
    如果我們要點擊實現跳躍的地方是一個button按鈕的話，由於button不能添加href，所以我們只好使用js跳躍程式碼來實現，程式碼範例如下：

<script>
    function onTopClick() {
         window.location.hash = "#abc";
       }
    </script>
    <input  type="button" name="Submit" value="提交"  onclick="javascript:onTopClick();" />
    <div id="abc">js跳转到页面指定div位置</div>

注意：上述，點選提交按鈕，將會滾定跳轉定位到同一頁id="abc"的div處。這段js點擊跳轉頁面程式碼實現的原理是：頁面各元素賦予唯一ID，點擊提交按鈕觸發js點擊事件，js透過ID滾動跳轉定位到該元素，window.location.hash = "#abc"指的就是定位到目前頁面id="abc"的div。

那麼以上所述就是關於div實現局部跳轉頁面的兩種簡單方法，相信儘管是新手小白在看過此篇文章介紹後也會輕鬆的掌握相關知識。

以上是js怎麼實作滑鼠點擊目前頁面某處後跳到指定div部位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！