在 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方法用于修改当前历史条目。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
