在 JavaScript 中跳轉到錨點

Muhammad Muzammil Hussain 2023年1月30日 2022年5月10日

JavaScript JavaScript Anchor

跳轉到 HTML 中的錨點
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>

上面的示例顯示了包含多個段落內容和單獨標題的 HTML 原始碼。
我們為用於導航的標題一和二分配了 ID。
我們使用了多個錨標籤：Navigate to One 和 Navigate to two，其中我們在點選時呼叫了函式 jumpTo()。
函式 jumpTo() 將接收字串 id 作為引數。
我們在 JavaScript 程式碼中宣告瞭函式 jumpTo(anchor_id) 來獲取錨 id 並生成一個沒有雜湊的 URL。
我們通過將 location.href 分配給帶有連線雜湊的傳遞的錨 id 來導航目標元素。
history.replaceState 方法用於修改當前歷史條目。