允许跳转到特定部分的锚标记不起作用

Question

我尝试使用锚链接，这样我就可以跳转到代码的特定部分，当我点击code时，我可以跳转到网页中的那个链接，它应该在同一页面上打开该部分，而不会重定向到其他部分，但事实并非如此工作webpage 该网页应仅在我单击主页或目的地时显示“lorem ipsum ....”但未单击时显示

我试图让这段代码工作，我希望有人能帮我解决这个问题

Answer 1

它正在工作，但您的浏览器无处可滚动，因为一切都已经可见。

如果你想可视化目标元素，你可以使用the :target selector。

理想情况下，您应该有一个链接的标题。

为了进行测试，您还可以在文本上添加 min-height: 100vh，使其至少与窗口一样高，以便滚动。

:root {
  scroll-behavior: smooth;
}

h2:target {
  outline: .1rem solid orange;
}

p {
  min-height: 100vh;
}

<nav>
  <h2>On this page</h2>

  <ul>
    <li><a href="#s1">Section 1</a></li>
    <li><a href="#s2">Section 2</a></li>
  </ul>
</nav>

<h2 id="s1">Section 1</h2>

<p>Lorem ipsum</p>

<h2 id="s2">Section 2</h2>

<p>Lorem ipsum dolor</p>