在 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 方法用于修改当前历史条目。