Home » Issues HTML: Anchor link landing in wrong position

Issues HTML: Anchor link landing in wrong position

by Pring
Issues HTML: Anchor link landing in wrong position

This tutorial will teaches you how to fix anchor link landing in wrong position. Anchor tags are useful bits of html. We use anchor tags to jump to a specific place on the page we’re on or on another page.

This problem is that your fixed header is out of the document flow so it`s height/position are not factored in to the scroll position of the browser.

If you were to hide the header after click the anchor tag, you would see that it does place you in the incorrect position.

Finally, to fix this issues you can be compensated for with a following css:

// Adjustment for anchor tag positioning with fixed header
:target:before
{
   display: block;
   height: 60px; // Height of header. You can adjustment  height of header on your page.
   margin-top: -60px;
   content: "";
}

I think this can help you. If you hit a problem or have feedback, leave a comment below. Wish you success and luck.
Thanks and best regards!
— Pring —

Related Articles

1 comment

vurtil opmer December 7, 2019 - 7:50 pm

I have been examinating out a few of your stories and i can claim pretty clever stuff. I will surely bookmark your site.

Reply

Leave a Comment