Anchor (jump in-page) in HTML5

Question

I'm using a html 5 template which basically has 1 big index html file and uses anchors (id=" ") and to open "new" page.

Here is my site: http://www.plans4canada.ca

Now on this page: http://www.plans4canada.ca/#phones , I would like to put a link at the top that will jump "within" the page. Basically want to have 3 links at the top that will jump to plans AC (a bit redundant), DE and FH which is at the bottom.

I tried adding id, but that would "open" a new page rather than just scrolling down.

Any help? Sorry, html noob :)

Answer 1

You can use Javascript. Make your anchor onclick hides all the others thing and only display the phone tab. Same for the rest. See what i mean:

 .nav { text } body { font-family: sans-serif; } button { background: white; border: 1px solid black; padding: 10px 20px; font-size: 15px } 

 <div class='nav'> <button onclick='document.getElementById("phone").style.display = "block"; document.getElementById("plans").style.display = "none";'>Phones</button> <button onclick='document.getElementById("plans").style.display = "block"; document.getElementById("phone").style.display = "none"'>Plans</button> </div> <div id='phone'> Here is the information of your phone page. The other page are set to <code>Display: none</code> by default, so I made a button that will show the phone page onclick, and also hide the plans page. </div> <div id='plans' style='display:none'> Placeholder </div> 

Answer 2

Try something like smooth scroll

https://github.com/cferdinandi/smooth-scroll