允許跳轉到特定部分的錨標記不起作用

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>