Good Morning/Afternoon/Evening,
I have a webpage which contains some anchor links in a nav section. Each anchor link is meant to go to a certain section of the page. They are set out in the same general format as this:
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
<!-- Further down the page... -->
<p id="section1"></p>
<p id="section2"></p>
<p id="section3"></p>
Most of the links work as expected but there is one link that is formatted just the same as the others but the link goes to the wrong section of the page. Does anybody have any ideas about why this could be happening?
Here is the relevant code:
<div style="z-index: 1000; line-height: 32px;" class="dots">
....
<a href="#translation" class="lineDot" id="d3"><p id="d3text" class="lineText" style="display: inline;">Translation</p><i class="dot fas fa-circle"></i></a>
....
</div>
<p id="translation"></p>
If that section has the css position defined to absolute or there is a div before it that has position absolute or fixed this may be your problem because javascript doesn't take in consideration the height of these elements Or if you have a float that is not cleared this also may be the problem