Creating a link to a specific part of a web page.

[justintime]

Hi, I wondered if someone could help me. I have used an online website template and amended it to suit. It's one of those scrolling ones and in the menu you can click on a heading and it scrolls down to the relevant section. There is also a dropdown heading to add additional pages.

When you click on an additional page, then click on (say) About Us, it simply adds #about to the html page you're on. I have tried <a href="index.html#about"> but that doesn't work. Any suggestions please?

 

[Deleted member 325090]

This may not be your issue, but it's worth checking for starters.

The "#about" bit needs to marry up precisely with the html id of the bit of the page which it needs to scroll to.

So check that your page has a html element which has an id of "about" (without the hash). If it doesn't add it in and see if it works.

You can also check this by opening the developer tools window (F12), and typing:

document.getElementById('about')

in the console. If it returns null then that's your problem

 

[zigojacko]

As per above.

Create a section on the page with the relevant ID or link to existing ID.

<div id="id">
Your markup here...
</div>

Then if you create a anchor link (link in your menu) like the below, it will jump to the 'id' section.

<a href="#id">ID</a>

You can read more on this here.

 

[UKSBD]

If you are coming from *another page* you need to make sure you are linking to the page with the about section on it.

Use an absolute URL 1st to test it.

 

[justintime]

I'm not sure what I did wrong, but I followed UKBSD's advice then reduced it to index.html#about etc and all working now. Many thanks to all who responded.