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

Question

我尝试使用锚链接，以便我可以跳转到代码的特定部分，并在网页中单击链接的代码时，它应该在同一页面上打开该部分，而无需重定向到其他页面，但它无法正常工作该网页应仅在我单击主页或目的地时显示“lorem ipsum ....”但未单击时显示

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

Answer 1

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

如果你想可视化目标元素，你可以使用:target选择器。

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

为了进行测试，您还可以在文本上添加一个min-height: 100vh ，使其至少与 window 一样高，从而使滚动成为必要。

 :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>