0

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 A-C (a bit redundant), D-E and F-H 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 :)

Barry Michael Doyle
  • 9,333
  • 30
  • 83
  • 143
Iuli
  • 121
  • 1
  • 4
  • 12
  • So you want the user to be able to see the page scroll down instead of just jump straight to the part of the page? That would require JavaScript. Are you fine with that? – Umair Khan Mar 12 '17 at 01:57
  • Actually I would just like the user to just jump straight to the part of the page yea. I don't care for a scroll down like on stackoverflow for example – Iuli Mar 12 '17 at 02:38
  • So all you want is for the text in the URL box to not change when the thing is clicked? – Umair Khan Mar 12 '17 at 02:53
  • I just want the page to go down where the plan is. And I actually just figured it out. I added an "id" to the section and when the view is on that page it will jump to that. However, it will not work if I'm in another anchor. So for example it works if I'm already under /#phones and click the navigation links, BUT if I'm under /#plans or something else, making a link with the same anchor like I have in the navigation links will not jump to that, even though technically it's 1 page – Iuli Mar 12 '17 at 04:30
  • Please read [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackoverflow.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link-to-it). Questions that depend on external resources to be understood become useless when the external resource goes away or is fixed. Create a [MCVE] and put it in **the question itself** instead. – Quentin Mar 13 '17 at 12:54

2 Answers2

0

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>
AzDeveloper
  • 333
  • 1
  • 3
  • 14
0

Try something like smooth scroll

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

The Gibbinold
  • 259
  • 3
  • 12