如何从 <a> 打开 html 文档的特定部分？答案

【问题标题】：How to open from <a> an specific part of a html document?如何从 <a> 打开 html 文档的特定部分？
【发布时间】：2020-09-22 11:58:07
【问题描述】：

我在 index html 中有这些 <a href> 按钮，我想打开不同的页面，但是当我按下链接时，我需要打开第二个文档的特定部分，即 <article>。

我正在尝试开发一个 index.html，其中有带有文章的按钮（如博客），当我单击按钮时，它会打开编写文章的文档，例如 technology.html，每个按钮都会转到我在该部分中编写的特定文章，而不是从文档顶部加载。

【问题讨论】：

这就是 URL 的“#identifier”部分的用途。为<article> 元素提供唯一的“id”值，然后在链接中的“#”之后使用该字符串。
如果他们在博客中，<article> 元素可能已经有 id 值。
这能回答你的问题吗？ Scroll to a specific Element Using html
您的答案已经存在，请查看link
您想在index.html 中加载另一个HTML 文件吗？如果是这样，那么您可能正在寻找AJAX。

标签： javascript html

【解决方案1】：

在您要链接的元素上设置id 属性，并将该ID 包含在您的URL 路径末尾，用# 表示。

因此，要链接到www.example.com 上的<article id=“blog1”>，您的锚标记将是：

<a href=“http://www.example.com#blog1”>Link</a>

【讨论】：

【解决方案2】：

这个怎么样：-

如果您想要重定向或定位到当前页面元素的链接，请使用定位类型 URL，例如href="#element_to_target" 这是您问题的一个工作示例。

article{ height: 500px; width: 100%; display: flex; align-items: center; justify-content: center; }
article p{ font-weigth: bold; }
#first{ background: red; color: #fff; }
#second{ background: blue; color: #fff; }
#third{ background: green; color: #fff; }
.fixed{ position: fixed; top: 3px; }
.fixed a{ background: #dcdcdc; padding: 10px; border: 1px solid #666; }

 <html style="scroll-behavior: smooth;">
  <div class="fixed">
    <a href="#first">First</a>
    <a href="#second">second</a>
    <a href="#third">third</a>
  </div>
  <article id="first"><p>Hi I'm first</p></article>
  <article id="second"><p>Hi I'm second</p></article>
  <article id="third">Hi I'm third</p></article>
</html>

如果这不适合您，请在 #_type_identifier 之前添加您的 URL，例如href="http://yourdomain.or/path#element".

希望对你有帮助，谢谢。

【讨论】：