在 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方法用于修改当前历史条目。
相关文章
在 JavaScript 中闪烁文本
发布时间：2024/03/22 浏览次数：119 分类：JavaScript
-
本文将介绍如何通过窗口对象加载函数、onload 属性和使用 JavaScript 的 jQuery 约定来执行文本闪烁。
在 JavaScript 中更改页面
发布时间：2024/03/22 浏览次数：51 分类：JavaScript
-
这篇文章介绍了如何在 JavaScript 中使用 window.open() 和 window.location 更改页面。
在 JavaScript 中高亮显示文本
发布时间：2024/03/22 浏览次数：103 分类：JavaScript
-
本教程向我们展示了如何使用 JavaScript 高亮显示文本。将用于此目的的方法是 searchPrompt 方法和标记标记方法，将使用代码段详细说明。
在 JavaScript 中创建哔声
发布时间：2024/03/22 浏览次数：119 分类：JavaScript
-
JavaScript 不具有任何直接的方法或属性来警告哔声或在特定函数上产生任何声音。但是该任务可以通过添加音频源并使用 JavaScript 音频功能使用 HTML 标记来完成。
