Link to another page with anchor div id

Question

So I have a number of dropdown links on my main navigation that need to link to other landing pages and scroll or show specific part of that page, like an article or a specific service. I have went through a lot of examples here but can't get this to work:

<a class="dropdown-item" href="#" onclick="location.href = '/voice-data#broadband/'">BROADBAND & MANAGED INTERNET</a>

The above link should anchor to this div on another page:

<div class="row broadband-block" id="#broadband">

At the moment it lands on the page it needs but doesn't go to the anchor div that it's supposed to,but it does add #broadband to the url in the browser. What am I doing wrong and what would be the best solution, as I have quite a few links like that to do?

Answer 1

Your problem is the ID attribute. Remove the # from your ID and it should fix your problem:

<div class="row broadband-block" id="#broadband">
<div class="row broadband-block" id="broadband">

Or adjust your 'a' tag and add an extra '#' to the front of your url:

<a class="dropdown-item" href="#" onclick="location.href = '/voice-data##broadband/'">BROADBAND & MANAGED INTERNET</a>

Also, javascript onclick not needed unless this is what your application environment requires, it can all be done inside href attribute.

Answer 2

you should do this

<a class="dropdown-item" href="/voice-data/#broadband">BROADBAND & MANAGED INTERNET</a>

just use the href instead of onclick.

and the ids should match, at the current state you should be using ##broadband while you should use the id as follows:

<div class="row broadband-block" id="broadband">

Edit: @pointy pointed it out (no pun intended)