在 JavaScript 中跳轉到錨點

Muhammad Muzammil Hussain 2023年1月30日 2022年5月10日
  1. 跳轉到 HTML 中的錨點
  2. JavaScript 中的錨點跳轉
在 JavaScript 中跳轉到錨點

在網站上,我們通常會觀察到,如果我們想要導航到網頁的特定部分或內容,我們需要上下滾動以重定向並專注於該目標元素。

錨點跳轉背後的基本思想是通過單擊自動導航或滾動到所需的內容。

跳轉到 HTML 中的錨點

在 HTML 中,我們為標題、影象和段落等標籤定義了 id,如下所示。

<tag id="anchor-id">Name of Section</tag>

為了重定向到 HTML 中的標記內容,我們使用帶有內容 id 雜湊引用的 anchor 標記,如下所示。

<a href="#anchor-id">navigate to section</a>.

使用者可以通過單擊 navigate to section 錨標籤自動導航到所需的內容。

JavaScript 中的錨點跳轉

在 JavaScript 中,我們可以宣告一個函式來處理網頁的所有錨點跳轉,以導航特定內容或網頁部分。

我們將宣告一個函式,我們將在其中接收錨點 id 作為引數,並在該 id 的幫助下,我們將使用 location.href 將使用者重定向到目標元素。

這是使用 JavaScript 進行錨點跳轉的示例。

HTML:

<body>
      <h2 id="one">One Heading</h2>
    <p class="main-content">
      Lorem Ipsum is a printing and typesetting industry dummy text. Since the 1500s, when an unknown printer scrambled a galley of type to construct a type specimen book, Lorem Ipsum has been the industry's standard sham text.
    </p>

     <h2 id="two">Two Heading</h2>
    <p class="main-content">
      Lorem Ipsum is a printing and typesetting industry dummy text. Since the 1500s, when an unknown printer scrambled a galley of type to construct a type specimen book, Lorem Ipsum has been the industry's standard sham text.
    </p>

<a onclick="jumpTo('one');">Navigate to One</a>
<a onclick="jumpTo('two');">Navigate to two</a>
</body>

JavaScript:

<script>
function jumpTo(anchor_id){
  var url = location.href;               //Saving URL without hash.
  location.href = "#"+anchor_id;                 //Navigate to the target element.
  history.replaceState(null,null,url);   //method modifies the current history entry.
}
</script>
  1. 上面的示例顯示了包含多個段落內容和單獨標題的 HTML 原始碼。
  2. 我們為用於導航的標題一和二分配了 ID。
  3. 我們使用了多個錨標籤:Navigate to OneNavigate to two,其中我們在點選時呼叫了函式 jumpTo()
  4. 函式 jumpTo() 將接收字串 id 作為引數。
  5. 我們在 JavaScript 程式碼中宣告瞭函式 jumpTo(anchor_id) 來獲取錨 id 並生成一個沒有雜湊的 URL。
  6. 我們通過將 location.href 分配給帶有連線雜湊的傳遞的錨 id 來導航目標元素。
  7. history.replaceState 方法用於修改當前歷史條目。