2

I am having a problem with what seems like it should have a simple solution. I have anchor links set up in a html page and am having a problem with one of the links.

Here is the code I am using...

<div class="top-menu">
<a href="#about">About</a></br>
<a href="#jersey">Jersey</a></br>
<a href="#social">SocialMedia</a></br>
<a href="#art">Art</a></br>
</div>

The links

<a id="about"></a>
<a id="jersey"></a>
<a id="social"></a>
<a id="art"></a>

The anchors

The problem I am having is that 'About','Jersey' and 'Art' work perfectly fine, but 'social' keeps linking to 'jersey'.

I am using nice scroll, and a scroll to anchor script, however I have removed these and get the same effect.

As said previously I have also tried linking with name="" and id="".

The anchors were not inside a div, but I have tried that also.

EDIT: Also just tried using div tags instead of a.

Ollie Taylor
  • 43
  • 1
  • 4
  • Can you try using this? This helped me to fix my issue. https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors – Christian Saiki Oct 22 '20 at 00:54

2 Answers2

0

It means you have multiple element having same Id also there is another possibility that Id is in scroll limit

Umesh Aawte
  • 4,590
  • 7
  • 41
  • 51
  • Thankyou,I have searched for the same id and this is not the case. It is not linking to a random location, it is linking to #jersey instead of #social – Ollie Taylor Nov 26 '14 at 12:47
  • I have also just tried giving it a new obscure id and updated the link. No luck. The same thing happens. – Ollie Taylor Nov 26 '14 at 12:55
0

I am still unsure as to this problem however I have found a solution. I have placed the anchor inside the div below it.

Ollie Taylor
  • 43
  • 1
  • 4