链接按钮到同一页面中的标题

Question

我试图将按钮链接到同一页面上不同部分的标题，但我不知道如何使用。我可以使用从一个班级到另一个班级的链接，但如何使用具体词。 我所做的是

<Button className="sec-btn"> <a href="/ Antsy services"> Get Started</a> </Button>

我希望当用户单击“开始”按钮然后将其链接到同一页面上的“Antsy 服务”标题时。

<h1 className="heading-1">Antsy services</h1>

Answer 1

我从这个问题中了解到，您有一个 href 锚标记元素，单击该元素后，您希望将页面向下滚动到其他元素。

您可以使用 ID 作为同一页面上元素之间的链接形式。

解决方案

只需给要滚动的元素一个 ID，然后在锚标记中，您就可以通过 href 提供指向它的链接。

<a href="#test">
  <button> click me </button>
</a>

<div class="space"></div>

<div id="test">
  <p> hello </p>
</div>

这是它的代码笔，因此可以更容易地看到效果。

https://codepen.io/shanecreedon/pen/poJGovK

Answer 2

您正在寻找的是锚链接。

如何创建和使用它们：

将id="example"添加到页面上的某个元素
在页面顶部添加<a href="#example">Scroll me to example element</a>
点击看看会发生什么

Answer 3

您需要像这样使用 id 选择器语法。 标题应该有一个 id 选择器...

<h1 id="heading-1">Antsy services</h1>

然后你可以像这样链接到页面的部分：

<a href="/Antsy services#heading-1"> Get Started</a>

Answer 4

我看到您正在尝试构建一个带有部分的单页站点。 为此，您必须对要导航到的所有标题使用 ID。

尝试这个，

 <html> <head> <title>Example</title> <style> h1{ height : 100vh; background: skyblue; } h2{ height: 100vh; background: #c0c0c0; } h3{ height: 100vh; background: #a0faf9; } </style> </head> <body> <a href="#home">Home</a> <a href="#services">Services</a> <a href="#contact">Contact</a> <h1 id="home">Home Section</h1> <h2 id="services">Services Section</h1> <h3 id="contact">Contact Section</h1> </body> </html>

链接按钮到同一页面中的标题

问题描述

4 个解决方案

解决方案1
2 已采纳 2020-03-29 13:06:26

解决方案

解决方案2
0 2020-03-29 13:00:27

解决方案3
0 2020-03-29 13:00:36

解决方案4
0 2020-03-29 13:57:51

链接按钮到同一页面中的标题

问题描述

4 个解决方案

解决方案1 2 已采纳 2020-03-29 13:06:26

解决方案

解决方案2 0 2020-03-29 13:00:27

解决方案3 0 2020-03-29 13:00:36

解决方案4 0 2020-03-29 13:57:51

解决方案1
2 已采纳 2020-03-29 13:06:26

解决方案2
0 2020-03-29 13:00:27

解决方案3
0 2020-03-29 13:00:36

解决方案4
0 2020-03-29 13:57:51