The anchor tag that allows one to jump to a specific section is not working

Question

I tried to use the anchor link so that I can jump to a specific part of the code and in the webpage when I click on code that link it should open up that part on the same page without redirecting to other but it is not working webpage The webpage should show "lorem ipsum...." only when I click on home or destination but it shows it without clicking

I tried to get this code to work and I hope someone could help me solve the problem

Answer 1

It is working, but your browser has nowhere to scroll to, because everything is visible already.

If you want to visualise the targeted element, you can use the :target selector .

Ideally, you would have a headline that is linked.

For testing, you could also add a min-height: 100vh on the text, to make it at least as high as the window, to make scrolling necessary.

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