offsetting an html anchor to adjust for fixed header [duplicate]

You could just use CSS without any javascript.

Give your anchor a class:

<a class="anchor" id="top"></a>

You can then position the anchor an offset higher or lower than where it actually appears on the page, by making it a block element and relatively positioning it. -250px will position the anchor up 250px

a.anchor {    display: block;    position: relative;    top: -250px;    visibility: hidden;}

I found this solution:

<a name="myanchor">    <h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1></a>

This doesn't create any gap in the content and anchor links works really nice.

I was looking for a solution to this as well. In my case, it was pretty easy.

I have a list menu with all the links:

<ul><li><a href="#one">one</a></li><li><a href="#two">two</a></li><li><a href="#three">three</a></li><li><a href="#four">four</a></li></ul>

And below that the headings where it should go to.

<h3>one</h3><p>text here</p><h3>two</h3><p>text here</p><h3>three</h3><p>text here</p><h3>four</h3><p>text here</p>

Now because I have a fixed menu at the top of my page I can't just make it go to my tag because that would be behind the menu.

Instead, I put a span tag inside my tag with the proper id.

<h3><span id="one"></span>one</h3>

Now use 2 lines of CSS to position them properly.

h3{ position:relative; }h3 span{ position:absolute; top:-200px;}

Change the top value to match the height of your fixed header (or more).Now I assume this would work with other elements as well.