I ran into an issue recently where I wanted to use anchors to jump to different sections within a long web page. The problem was every time I clicked the page would jump, but a fixed header would cover part of each section’s content.
After a bit of searching, some trial and error, a simple HTML adjustment and a bit of CSS and the problem was solved.
The Setup and the Problem
I started with a header that was set up like so: (styles inlined for clarification)
<div class="header" style="position: fixed; top: 0;"></div>Near the top of the page was an unordered list that contains the anchor links:
<ul>
<li><a href="#section1">Anchor Text</a></li>
<li><a href="#section2">Anchor Text</a></li>
<li><a href="#section3">Anchor Text</a></li>
</ul>
And of course, there was each section of content which I wanted to jump to:
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>Now as you can see, I started with adding the IDs to each section. This is when I noticed that clicking on one of the anchor links would actually cause the page to jump to the right section, but some of the content in the section would get covered by the header which is fixed and stays at the top of the page when scrolling occurs.
To overcome the issue a minor HTML adjustment was made and a small amount of CSS was also added to bring it all together.
The Solution That Worked
First, I moved the id’s of each section to a new element: (a span in this case)
<span class="anchor" id="section1"></span>
<div class="section"></div>
<span class="anchor" id="section2"></span>
<div class="section"></div>
<span class="anchor" id="section3"></span>
<div class="section"></div>The new <span> elements were added right above each section and would serve as the new anchor point. I’m not the biggest fan of empty elements on a page, but it does address the issue.
Once the new <span> elements were in place, a bit of CSS was added:
.anchor{
display: block;
height: 115px; /*same height as header*/
margin-top: -115px; /*same height as header*/
visibility: hidden;
}
The height and margin-top numbers are based on the height of the header. Using the Chrome developer tools, this number is easy to figure out.
After these simple adjustments, it was time to jump back in the browser and test it out. Clicking the anchor link jumped down the page and the <span> corrected the space for the header and voilà – The page now jumps correctly!
I searched for quite some time to find a fix for this problem and could not find nothing except js fixes. This solution worked amazingly well and was simple to impliment. Thank you so much!
Thank you for this post. You solved my life :-) Worked nearly two hours to fix this problem
@Torsten – glad to help and thanks for the kind words!
hey, thanks for sharing – pretty cool solution, helped me a lot, i was going nuts with this issue :D
here you can check another approach that avoids the html editing. It just adds the “extra” element via css. It useful if you have a long list of elements.
http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors
This definitely solved the problem. Thanks a lot.
Great. Thanks a lot! This really helped me solve my problems.
Very helpful, thanks!
This was very helpful!
I attempted to make something that worked with default anchor codes using the [name] selector and psuedo elements. Here’s what I’ve come up with so far: http://jsfiddle.net/shshaw/VujcA/
Chrome & Safari work without a hitch, IE8 works mostly as expected, Firefox doesn’t like semantic anchors & IE7 is just gross.
Anyone else willing to take a stab?
Awesome, thanks for your help! This was exactly what I was looking for.
That was awesome help, thanks! I have been trying to figure this out for a couple of hours. Awesome!!
Thank you sooo much!! I wish I found your website earlier!
Great idea. Implementing in our app. Cheers!
Very Helpful, Thanks !
Great, Helps lot !
Thank you, Mr. Lovelace – great fix! [applause]
Well, it sorta works…. what I want to do now is take the huge space out between each of my anchor points. it seems to put a header height space between each section, which is no good for what I am doing.
here check it out: http://innovationlighting.net/rentals
oops, that is http://innovationlighting.net/rentals.php
my bad…
Hi Patrick,
I took a look at your site and it appears you are missing the negative margin and visibility css properties. Please try adjusting your CSS:
.anchor {display: block;
height: 213px;
margin-top:-213px;
visibility:hidden;
}
Hope that helps!
thank u so much.. helpful :)
I have to salute you, these handful lines of code do the trick!
I was close to completely going nuts before :-)
This is great. I’d been struggling with this for a while. Thank you
This is a good solution, I had not considered this before. I have had similar problems and found that adding padding to the div can also be effective as long as it works with the layout of your site.
Really great! Solved my problem. Thank you!
Great tips mate,thank you very much!
Greetings! This is my first comment here so I just
wanted to give a quick shout out and tell you I really enjoy reading through your articles.
Can you recommend any other blogs/websites/forums that cover the
same subjects? Thank you so much!
Watch out for the negative value, as with Patrick Haroldson, that caught me out too.
Once the negative value is fixed, the gaps disappear. This works really well. Great work, Phillip, well done. And thank you.
Hye Philips
This was truly a meaningful post. Three cheers to you man !!
I was struggling for past 2 hours on this topic and was not able to find any clue on how to do it in simple measure. Your answers was Bull’s eye , straight to the goal.
Thanks :)
THANK YOU!! I’d never figure out myself!
Phillip, this saved me quite a bit of trouble… Gracias, amigo!!
A new fan from Argentina
Hey Iván – thanks for the kind words and I am glad you found it useful!!
Thanks!!!
Thank you so much for this!
Thank you!!!
Works like a charm!
:)
Thanks for the trick ! ;)
AWESOME. Seriously, I’ve been stuck with this same problem for days. Glad I found such a simple fix. THANK YOU!!!
Thank you so so much! Trawled every corner of the internet for this fix!
Thank you kind sir, one correction though, for the sake of people that will copy-paste your code, please correct the commented part of the anchor css class like this:
.anchor {
display: block;
height: 115px; /* same height as header */
margin-top: -115px; /* same height as header */
visibility: hidden;
}
Hey Kristijan – I’ve updated the code block and thanks for pointing that out.
Thank you so much! You saved my life!
This is exactly what I was looking for – I was struggling for a solution. Thank you for posting!!
Super helpful and i no longer am growing gray hair!!!
I, as well, have been searching for an intuitive solution for this problem, and this works like a dream. Thank you so much!
Thanks for sharing, helped
Thanks a lot of! it saved a lot of time and solved my problems at my new web page! thanx a lot!
Brilliant! cheers mate
Thank you, this was driving me nuts!
Yay, nice tidy solution that works perfectly!! Thanks!!!
Very nice!! Thanks
Thanks so much. Such an easy and simple fix, and yet something that did not occur to me.
Thank you ever so much. Your gift of knowledge keeps on giving. I’ve spent too much time searching for a solution to this and yours was straightforward! Thanks for sharing!
I wanted to thank you for this awesome solution.
I had the same problem working on a chm help file months ago.
That time this it solved my problem, BUT now another
problem emerged out of the HTML bag.
and that’s when you have to refer to an inline position.
I mean something like this for example:
Something and Anything something else . . .
This work around causes “something else” to be rendered to a new line and
that’s another problem, that I believe is because of “display:block”.
Sorry for BAD output
The example was:
<p>Something and Anything <span id=”my-id”></span>something else . . . </p>
Perfect! Thank you for this solution. Works just as I need it to.
Great solution. Clean and simple. Thank you!
Thanks!
Thanks! This was driving me crazy and your solution is simple and effective. I’d be interested to know what a more “semantic” solution would be, without an empty span, but at this point I’m just happy to have it finally working.
Thanks again.
Was pulling my hair out with this bug/issue. Thanks for the tip sir !! Worked like a charm.
Worked perfectly. Thank you.
You saved me with this article. Thanks so much. It worked perfectly. Note for mobile don’t forget to readjust your height for the size of the mobile menu.
This is FANTASTIC. Thank you for this elegant solution.
This worked beautifully. Thank you.
[…] header at the top of webpage! Then I found an useful blog describing the issue I had in “anchor links with a fixed header” also providing a solution […]
Bumped into the problem and a search found your thoughtful assistance. Thanks.
If you have the div in a column, change ‘display’ to inline block.
display: inline-block;
doesn’t work for the first div! but thanks for the others :=)
[…] “anchor links with a fixed header“ […]
Thank you so much!
Thanks, that saved my life. :)
Perfect! Simple, clean and efficient!
This was clear and very helpful. Thanks.
Hello
Just wanted a say a huge thank you for this, I was beginning to think I would never work this one out without making a big mess. I can go away for Christmas now with a smile on my face, thank you so much.
Diane
Your solution just saved my life, friend. Perfect. Thanks a big big bunch!
.anchor{
position:relative;
display:block;
top:-3.618em;
height:0;
width:0;
visibility:hidden;
}
This will prevent unwanted layout “empty spaces”
Huge Thanks……..
The same bug appears when finding a page with Ctrl+F: the found text would be under the header.
One have to search and then scroll a little bit up to see the highlighted result…
Did you find a solution for this problem?
thank you man, you saved my day. good job :)
Very nice! The only problem I have is when using the CSS :target selector. Now it will affect the invisible span instead of the invisible element. I guess it’s more a Javascript problem now. Good job anyway!
THANK YOU SO MUCH FOR THIS! I am a student new to coding and this saved my butt and easily solved my problem! ( :
Good, worked for me
Hi there,
I have a menu item that links to an anchor. When I’m on the same page as the anchor and I click the menu item, it takes me to the place I want and nothing is hidden behind the fixed header. When I’m on a different page, however, and I click the same menu item, I’m taken to the place in the text but the top portion is hidden behind the fixed header. This means that the fix above (and any other fix I can think of) will work correctly if I’m coming from another page, but if I’m coming from the same page it will create a space at the top when I navigate to the anchor. Do you have any idea how to fix this?
You are Superb !!! … .. Exactly 100% right what people says… It’s Works.. !.. Thanks A lots….. This had cause me headache for quite long time & now your solution is perfect & Excellent.. !
thanks for these…
Perfect, thank you for sharing this. I had to over compensate for size of the header if anyone else has the same issue.
Excellent and elegant solution – I was looking for the same thing, as I am doing a lot of one page templates with fixed headers – a big thanks from me as well!!!
Thank you, It worked great for me.
excellent solution for me.
thank you very much….
Works well! I used this to globally set anchors purely used as anchor points (have id but no href):
a[id]:not([href]) {
}
Very helpful. Thanks for sharing!
Thank you, this is exactly what I needed :)
Hey its very nice solution. Helped very much. Saved my time. Thnx
Ok i think i would love to say Thaaaaaaaaaaaaaanks. My client was eating my brain (like zombie) because of this issue.
Thank you, works great ! :)
This is a great solution. One issue, what if you only want to use the ID Anchor for mobile devices? Thanks!
Amazing! :D
Sorry, didn’t work straight out of the box, have a feeling its conflicting somewhere, I did not change any of your variables, simply placed the css in my css file, and the span tags above the section i wanted to anchor to, and when i clicked the menu item, the page just scrolled to the top. I can see this as a great solution, however it did not work for me :/
Ohhhhhh…!!!! FANTASTIC!!! Thank U very much, it’s realy good method!!!
Very helpful, thanks!
I love you! Thank you!!
Worked like a charm, thank you so much!
Thank you. You learned me something very useful.
That was so helpful!! Thank you very much for sharing!
Greaat! Thks man
super helpful! thanks!
very very very helpful!!!!! Thank you boss.
Thanks so much!! Your solution worked perfectly :)
Thanks!! Perfect Solution!!!
Works perfectly!
After days of nothing a step forward thanks your advice! Thanks a million!!!!
Tried with IE11, Firefox, Chrome, in a pc, and in Firefox, Opera, and Safari in a Mac : It’s work on all of them!
Awesome! Works perfectly :D
Awesome article and totally worked! Thank you so much!
Thanks, works perfect.
OMG!! After spending an hour trying stuff from stack overflow that seemed overly complicated, this worked!!!
This screws up layout in firefox 41. It’s like it applied the negative margin to the parent element. Works in Chrome.
Still the best solution I’ve seen! (Chrome)
Thanks Stephen, I’m glad you found it helpful!
Thanks, works perfect!
Brutal! Muchas gracias!!
Thank you, worked like a charm!
Thanks so much – great trick
Thanks. Nice, simple, elegant solution.
Hi, I have tried this, but did’t work for me. When I click on the hyperlink ‘link’ e.g. ‘Partners’ to jump to the partner section, the “#partner” hashtag is added to the URL but the page does not load, I then click on the refresh button in the browser (chrome) and it loads. need some help. thank you.
THANKS!!!! So simple… Also to make different on mobile you could add something like
@media only screen and (max-width: 700px){
.anchor{
display: block;
height: 80px; /*same height as header*/
margin-top: -80px; /*same height as header*/
visibility: hidden;
}
}
See the result at my site @ http://sharkt.ca/services/local-seo-canada/ I’m currently doing a mobile version of my site so whit this CSS on top i get the exact result I want. THX a million time.
Thank you so much! My anchor links kept being hidden by the top fixed navigation areas, this was a perfect solution! You saved me HOURS!!
Did not work for me. I have vw values for basically everything. I can’t make the margin-top pull the span up, so it leaves extra space.
Hi thank you for this. But it is not working for me. I am using the CSS editor within wordpress.org. I am wondering if that is having an effect? Let me know if you have any ideas
Thanks Mate, thanks for posting that solution. Saved my day!
Hi why not trying:
#myanchor {
padding-top: 100px /* height of header */
margin-top: -100px
}
It works great on my pages
regards peter
I have a problem that I have the half fixed jejeje the anchor works perfectly as the way you helped us but…. It doesnt math when you put on the menu the #section… it does the same problem at the beggining, if you check my website you can discover what i am talking about, press “uno” in the menu at the top… but dont scroll down and you will see… but if you scroll down a bit and the you press “uno”it will match perfectly… do you know why?
It worked! thanks so much
Nice trick! Just what I needed, thanks.
Thanks! This worked great and only took a few media queries for all-device perfect viewing. :)
Thanks! This worked perfectly and probably saved me hours of headache; it’s so simple.
You saved me :p
thanks a lot !
works perfectly
Nice trick, it worked. Thanks.
Thank you so much. I’m going to be bookmarking your blog for further help.
Just the solution I was looking for. Nice and easy. Thank you
This solution worked like a charm. Thank you so much.
Thank you! This helped me BIG time.
Peter’s solution within the comments works when you’re unable to modify the markup, and removes the need for extra elements.
https://pixelflips.com/blog/anchor-links-with-a-fixed-header#comment-162990
I managed to make it work without span and ID….just adding a class “anchor” to the anchor name.
thanks :)
Thank you, it worked :)
Terrific solution, thank you!!
To state the obvious, setting height/margin top at a value greater than that of the nav bar creates even more space. Love the simple customization.
Thanks so much! Love this fix.
Awesome fix! Super quick and easy to implement. Saved me a lot of headache on my site.
Yeah this workaround is simple and easy, thank you!
This fix works without aditing any content on your pages:
:target:before {
content:””;
display:block;
height:90px; /* fixed header height*/
margin:-90px 0 0; /* negative fixed header height */
}
Thanks !!!!!! It working fine..
hi,
it working not for the top anker. My menu is not working. I have scroll down a little, after that the menu works. If i go back to top it stops working again…
any solutions?
Kudos!! Thanks
Still the best resolution out there! Thanks!!
After an hour of playing around with JS i found this simply solution.
Thanks alot!! <3
Thank you so much!
Thank you so much!
Many thanks to @caos ! Your CSS solves my problem.
caos says:
January 29, 2015 at 2:01 pm
.anchor{
position:relative;
display:block;
top:-3.618em;
height:0;
width:0;
visibility:hidden;
}
This will prevent unwanted layout “empty spacesâ€
:target:before {
content:””;
display:block;
height:55px; /* fixed header height your height*/
margin:1px 0 0; /* negative fixed header height */
}
no need for spans and other extra stuff, just add “space” on the fly
Thanks so much. I’m just learning, and I couldn’t find any solutions that I actually understood.
Thank you for sharing!
Thank you so much! Everything I had found was java, but this solution is just great!
So, I this solution didn’t work for me… I am trying to find a solution where it doesn’t matter how tall the “fixed” element is but that the section always appears underneath it. I say this because this menu is expandable and will change heights based on different window sizes.
this is not work for me. try using it, but the format of text is not readability, its mean broke the text.
Simplemente genial!! Thanks for that simple and brilliant!
This worked beautifully. Thanks so much!
Thanks a lot, simplest solution that works perfectly.
Thank you so much! you saved me a massive headache for mobile!!!!
You my brother are the definitions of genius
You my brother are the definition of genius
You saved my day…was going nuts with this issue :)
Great!!!!!
Excelente amigo, aun sigue funcionando perfecto .. gracias
Work great ! But one doubt regarding SEO. As anchor links are very usefull to give strength to the keyword used. would it be harmful for SEO to put the anchor on the wrong element (element above the position the anchor should be) ?
Would be even better to use a trick to be able to keep the anchor position…
I used your trick on my website.
NB: in my case i had to adjust the sized of the invisible span to the screen (desktop or smartphone), and also to add an extra margin to the header (only once become sticky – as the relative position on the page move as well…)
https://thailandfightgear.fr/questions-reponses-faq
VICTORY!!! Thanks
Thanks a lot. You are a savior. Worked great.
Thank you!
[…] from http://www.pixelflips.com/blog/anchor-links-with-a-fixed-header/ […]
ingenuity = you
Nice!
On page links lining up nicely allowing for my header.
Thank you for sharing your solution.
Jack
Gracias!
Thank you for sharing this!
Thanks a lot. You saved me a lot of time!! :)
You rule! Much appreciated, this worked :)
Worked! Many thanks!!
Worked perfectly. Thanks so much!
Thank you for this post: It solves my issue!
today’s best solution is by adding this to CSS:
:target:before {
content:””;
display:block;
height:60px; /* fixed header height*/
margin:-60px 0 0; /* negative fixed header height */
}
WOW! I spent way too long looking for an answer to this, and this was so simple! Thank you!
Really nice and easy idea. Thanks
i was trying to figure out solution. thanks i found you..
This is such a great solution! Thanks!
Simple and clear solution – much appreciated!
Thank you, just perfect!
Thanks a lot for this. I got stuck with this in a code assignment recently. Fixing it now.
Although, I came here looking for a different problem: I’m building a nav-bar of anchor links that should stick on left of my page id desktop view. Problem is that when I use position:fixed (or absolute), links become unclickable. Have you seen this problem too?
Thank you so much for solving a problem I was beginning to think was unsolvable!
Thank you so much for this simple solution! In a wordpress theme using themefusion – I added your .anchor css code to the code section of the page, then created a menu anchor element calling the CSS class: anchor. Then fiddle with the header sizing (mine was closer to 310px) – worked a charm!
Thank you so much for this simple solution!
thanks ! It works !
Have you tried to add this to CSS? It works for me.
:target:before {
content:â€â€;
display:block;
height:30px;
margin:-30px 0 0;
}
THANK YOU so very much!! I was going nuts, I have tried for two days(!) with all sorts of weird scroll oriented javascript that didn’t work at all.
A wonderful solution that still works like charm.
Thanks, cheers!
Thanks A Lot!!!
it saved my life :)
Brilliant. Exactly what I was looking for after fixing my header.
7 years after the original post and still helping people. :-)
Thanx! Still saving layouts at August 2019! ;)
I tried a lot of solutions before this but nothing seemed to work. Thank You So Much, this worked!
I appreciate, result in I found just what I was having a look for.
You’ve ended my four day lengthy hunt! God Bless you man.
Have a nice day. Bye
Thank you very much .
I am a chinese web developers , I’m searching to many websites to find these solution with out JS.
In my opinion, your solution is the best !
iofjeiorfer
Thank you! Something so obvious and yet I failed to think about this method myself!
Yasss… perf solution!
HERO!! Thanks
Great, the CSS code also works with the latest Avada version – Thanks for this great help
Legend! I owe you a drink! many thanks
It did the trick! Thanks so much for sharing!
Another thanks! This worked beautifully.
Awesome!!!!! Thanks!
Great topic! thank for sharing
Thanks exactly what I needed. Almost resorted to js
Many thanks. Works perfect!
Awesome ! Thank you so much, quick and easy to do !
Thanks a lot. It worked for me.
WOW it is 2021 and your tip from 2012 helped me a lot
I was struggling with this same problem and your technique works perfectly! Many thanks.
It works perfectly, thanks
11 years later and still working. ;-)
Other solutions are all JS based.
This took some editing of the HTML but in the end its the only true CSS “only” one I could find out there.
THANKS!!!
Nowadays, there’s an even better solution. Just add this to your CSS file:
html {
scroll-padding-top: ;
}