Fixed page header overlaps in-page anchors

Question

If I have a non-scrolling header in an HTML page  fixed to the top  having a defined height  Is there a way to use the URL anchor  the  fragment part  to have the browser scroll to a certain point in the page  but still respect the height of the fixed element without the help of JavaScript  http   example com  bar   WRONG  but the common behavior           CORRECT   ---------------------------------        ---------------------------------    BAR                      header                                   header    ---------------------------------        ---------------------------------    Here is the rest of the Text             BAR                                                                                                                                                       Here is the rest of the Text                                                                                    ---------------------------------        ---------------------------------

User · Answer

If you can   t or don   t want to set a new class  add a fixed-height   before pseudo-element to the  target pseudo-class in CSS    target  before     content        display  block    height  60px     fixed header height     margin  -60px 0 0     negative fixed header height        Or scroll the page relative to  target with jQuery   var offset       target   offset    var scrollto   offset top - 60     minus fixed header height    html  body   animate  scrollTop scrollto   0

User · Answer

It feels somewhat hacky to my purist mind but as a css-only solution you can add padding to the active anchored element using the  target selector    x000D   x000D  html  body  height 100   min-height 100   margin 0   x000D  body  min-height 200    x000D  header  display inline-block  position fixed  font-size 1 5em  height 100px  top 0  left 0  right 0  line-height 100px  background black  text-align center   x000D  header a  color  fff   x000D  section  padding 30px  margin 20px   x000D  section first-of-type  section target  padding-top 130px   x000D   lt header gt  lt a href   one  gt  One lt  a gt   lt a href   two  gt  two lt  a gt   lt a href   three  gt  three lt  a gt  lt  header gt  x000D   lt section id  one  gt  lt h1 gt One lt  h1 gt Aenean lacinia bibendum nulla sed consectetur  Nullam id dolor id nibh ultricies vehicula ut id elit  Integer posuere erat a ante venenatis dapibus posuere velit aliquet  lt  section gt  x000D   lt section id  two  gt  lt h1 gt Two lt  h1 gt Aenean lacinia bibendum nulla sed consectetur  Nullam id dolor id nibh ultricies vehicula ut id elit  Integer posuere erat a ante venenatis dapibus posuere velit aliquet  lt  section gt  x000D   lt section id  three  gt  lt h1 gt Three lt  h1 gt Aenean lacinia bibendum nulla sed consectetur  Nullam id dolor id nibh ultricies vehicula ut id elit  Integer posuere erat a ante venenatis dapibus posuere velit aliquet  lt  section gt  x000D   x000D   x000D

User · Answer

Here is a complete jquery solution that will work in IE   Suppose the navigation bar elements are something like this    lt ul gt       lt li gt  lt a class  navigation  href    contact-us  gt Contact us lt  a gt  lt  li gt       lt li gt  lt a class  navigation  href    about-us  gt About us lt  a gt  lt  li gt   lt  ul gt    You can use the following jquery snippet to offset the scroll     function            a navigation   click function event            event preventDefault            offSetScroll   this                offSetScrollFromLocation window location href toLowerCase          function offSetScroll anchor        var href   anchor attr  href        offSetScrollFromLocation href      function offSetScrollFromLocation href          Change this according to the height of the navigation bar     var fromTop   250      if href indexOf      lt  0          return      var hash href substring href indexOf            var targetOffset     hash  offset   top-fromTop         html  body   animate  scrollTop  targetOffset   400  function e

User · Answer

A minimally intrusive approach using jQuery   Link    lt a href   my-anchor-1  class  anchor-link  gt Go To Anchor 1 lt  a gt    Content    lt h3 id  my-anchor-1  gt Here is Anchor 1 lt  a gt    Script       anchor-link   click function         var headerHeight   120         html  body   stop true  true  animate           scrollTop    this hash  offset   top - headerHeight        750       return false        By assigning the anchor-link class to the links  the behaviour of other links  like accordion or tab controls  are not affected   The question doesn t want javascript but the other more popular question is closed because of this one and I couldn t answer there

User · Answer

The top answer here created a 60px-high  tag that was masking other links that stopped working as a result  I found this solution working without side-effects   lt a class  quot anchor quot  id  quot top quot  gt  lt  a gt   a anchor       display  block      position  relative      top  -60px      visibility  hidden

User · Answer

I created a div with a few line breaks and gave that the id  I then put the code I wanted to show underneath  The link would then take you to the space above the image and the header would no longer be in the way    lt a href   image  gt Image lt  a gt   lt div id  image  gt  lt br gt  lt br gt  lt  div gt   lt img src  Image png  gt    Of course  you can change the number of line breaks to suit your needs  This worked perfectly for me  not sure if there are any problems though  I am still learning HTML

User · Answer

I had the same problem  I solved it by adding a class to the anchor element with the topbar height as the padding-top value   lt h1 gt  lt a class  quot anchor quot  name  quot barlink quot  gt Bar lt  a gt  lt  h1 gt   I used this CSS   anchor   padding-top  90px

User · Answer

You can now use scroll-margin-top  which is pretty widely adopted   Simply add the following CSS to the element you want to scroll to    element     scroll-margin-top  2em

User · Answer

I use this method because for some reason  none of the other solutions proposed actually worked for me  I promise I tried   section      position  relative     border-top  52px solid transparent     navbar height  2       margin  -30px 0 0     -webkit-background-clip  padding-box     -moz-background-clip  padding     background-clip  padding-box     section before      content         position  absolute     top  -2px     left  0     right  0     border-top  2px solid transparent      Replace section by a class if you prefer   source  Jump links and viewport positioning   Tested on Firefox 45 and Chrome 52  bootstrap version  3 3 7   For those who do not believe me I kindly prepared a jsfiddle with the solution in it  SOLUTION

User · Answer

I ve got it working easily with CSS and HTML  using the  anchor before  method mentioned above  I think it works the best  because it doesn t create massive padding between your divs    anchor before     content       display block    height 60px     fixed header height     margin -60px 0 0     negative fixed header height        It doesn t seem to work for the first div on the page  but you can counter that by adding padding to that first div    anchor-one padding-top  60px     Here s a working fiddle  http   jsfiddle net FRpHE 24

User · Answer

Used this script     document  on  click    a href         function  event        event preventDefault            html  body   animate           scrollTop      attr this   href    offset   top -140        1000

User · Answer

CSS trick will be a workaround  A proper solution which will work in all scenario can be implemented using jQuery   Refer to https   codepen io pikeshmn pen mMxEdZ  Approach  We get the height of fixed nav using document getElementById  header   offsetHeight And offset the scroll to this value   var jump function e      e preventDefault                             prevent  hard  jump   var target     this  attr  href            get the target          perform animated scrolling          html body   animate                      scrollTop    target  offset   top - document getElementById  header   offsetHeight - 5    get top-position of target-element and set it as scroll target           1000 function                      scrolldelay  1 seconds                     location hash   target             attach the hash   jumptarget  to the pageurl                          document  ready function              a href         bind  click   jump     get all hrefs     return false          P S     It includes a nice 5 pixels difference between header and target Scroll effect is not hard  rather smooth  Smooth Scrolling

User · Answer

I had a lot of trouble with many of the answers here and elsewhere as my bookmarked anchors were section headers in an FAQ page  so offsetting the header didn t help as the rest of the content would just stay where it was  So I thought I d post   What I ended up doing was a composite of a few solutions    The CSS    bookmark       margin-top -120px      padding-bottom 120px       display block       Where  120px  is your fixed header height  maybe plus some margin     The bookmark link HTML    lt a href   01  gt What is your FAQ question again  lt  a gt   The bookmarked content HTML    lt span class  bookmark  id  01  gt  lt  span gt   lt h3 gt What is your FAQ question again  lt  h3 gt   lt p gt Some FAQ text  followed by     lt  p gt   lt p gt     some more FAQ text  etc     lt  p gt     The good thing about this solution is that the span element is not only hidden  it is essentially collapsed and doesn t pad out your content   I can t take much credit for this solution as it comes from a swag of different resources  but it worked best for me in my situation   You can see the actual result here

User · Answer

html     scroll-padding-top  70px     height of sticky header        from  https   css-tricks com fixed-headers-on-page-links-and-overlapping-content-oh-my

User · Answer

You can do this with jQuery   var offset       target   offset    var scrollto   offset top - 50     fixed top bar height   50px    html  body   animate  scrollTop scrollto   0

User · Answer

Official Bootstrap Adopted Answer     id  before      display  block     content          margin-top  -75px     Set the Appropriate Height   height  75px     Set the Appropriate Height   visibility  hidden       Credits  Merge

User · Answer

I needed something that works for inbound links  links on page  AND that can be targeted by JS so the page can respond to changes in the header height  HTML   lt ul gt     lt li gt  lt a href   ft who  gt Who  lt  a gt  lt  li gt     lt li gt  lt a href   ft what  gt What  lt  a gt  lt  li gt     lt li gt  lt a href   ft when  gt When  lt  a gt  lt  li gt   lt  ul gt       lt h2 id  ft who  class  fragment-target  gt Who  lt  h2 gt        lt a href     gt Can I be clicked  lt  a gt   lt h2 id  ft what  class  fragment-target  gt What  lt  h2 gt       lt h2 id  ft when  class  fragment-target  gt When  lt  h2 gt     CSS   fragment-target       display  block      margin-top  -HEADER HEIGHTpx      padding-top  HEADER HEIGHTpx      z-index  -1      The z-index  -1 allows links in the  padding area  above a fragment-target to still be clickable  as commented by  MuttenXd on his answer  I haven t found an issue yet in IE 11  Edge 15   Chrome 38   FF 52   or Safari 9 1

User · Answer

I use this approach      add class  jumptarget  to all targets       jumptarget  before     content       display block    height 50px     fixed header height     margin -50px 0 0     negative fixed header height        It adds an invisible element before each target  It works IE8    Here are more solutions  http   nicolasgallagher com jump-links-and-viewport-positioning

User · Answer

I wasn t having any luck with the answer listed above and ended up using this solution which worked perfectly     Create a blank span where you want to set your anchor     lt span class  anchor  id  section1  gt  lt  span gt   lt div class  section  gt  lt  div gt    And apply the following class    anchor     display  block    height  115px           same height as header      margin-top  -115px      same height as header      visibility  hidden      This solution will work even if the sections have different colored backgrounds  I found the solution at this link

User · Answer

It works for me   HTML LINK to Anchor    lt a href   security  gt SECURITY lt  a gt    HTML Anchor    lt a name  security  class  anchor  gt  lt  a gt    CSS     anchor  before       content          display  block      margin-top  -50px      position  absolute

User · Answer

Add a class with a  paddingtop  so it works      lt h1 gt  lt a class  paddingtop  gt Bar lt  a gt  lt  h1 gt    And for css you have    paddingtop       padding-top  90px

User · Answer

handle hashes when page loads     lt http   stackoverflow com a 29853395 gt  function adjustAnchor       const  anchor       target      const fixedElementHeight       navbar-fixed-top   outerHeight      if   anchor length  gt  0      window scrollTo 0   anchor offset   top - fixedElementHeight       window  on  hashchange load   adjustAnchor      body   on  click    a href         function  ev      if  window location hash       this  attr  href          ev preventDefault        adjustAnchor

User · Answer

I think this approach is more useful    lt h2 id  bar  title  Bar  gt Bar lt  h2 gt    id  target       display  block      position  relative      top  -120px      visibility  hidden      id  target  before       content  attr title       top  120px      position  relative      visibility  visible

User · Answer

The way that I find being the cleanest is the following one       bar  before       display  block      content           margin-top  -150px      height  150px      visibility  hidden      pointer-events  none

User · Answer

I found I had to use both MutttenXd s and Badabam s CSS solutions together  as the first did not work in Chrome and the second did not work in Firefox   a anchor      padding-top  90px     a anchor before      display  block    content        height  90px    margin-top  -90px      lt a class  anchor  name  shipping  gt  lt  a gt  lt h2 gt Shipping  United States  lt  h2 gt

User · Answer

lt div style  position relative  top -45px   gt       lt a name  fragment  gt   lt  a gt   lt  div gt    This code should do the trick  Swap out 45px for the height of your header bar   EDIT  If using jQuery is an option  I ve also been successful using jQuery localScroll with an offset value set  The offset option is a part of jQuery scrollTo  which jQuery localScroll is built upon  A demo is available here  http   demos flesler com jquery scrollTo   second window  under  offset

User · Answer

Just discovered another pure CSS solution that worked like a charme for me   html     scroll-padding-top  80px     height of your sticky header        Found on this site

User · Answer

A very simple CSS only answer is to put this at the top of your stylesheet   a padding-top  90px   a link padding-top  unset     The first style regulates all anchor tags where the second styles anchor tags with a hyperlink    Note  This currently works in Firefox and Edge but nor in Chrome

User · Answer

Updated on 2 2021 Correct but not cross-browser solution is  h1     scroll-margin-top  50px    It is part of CSS Scroll Snap spec  Currently runs on all modern browsers except for Safari  It is fixed there and released in TP  but not as a stable yet

User · Answer

Implemented using  before worked great until we realized that the pseudo element was actually covering and blocking pointer events that sat within the pseudo element s area  Using something like pointer-events  none on the  before or even directly on the anchor had no affect   What we ended up doing was making the anchor s positioning absolute and then adjusting it s position to be the offset height of the fixed area   Offset Anchor without Blocking Pointer Events   section-marker        position  absolute      top  -300px      The value with this is that we re not blocking any elements that might fall within those 300px  The downside is that grabbing that element s position from Javascript needs to take into account that offset so any logic there had to be adjusted

User · Answer

While some of the proposed solutions work for fragment links    hash links  within the same page  like a menu link that scrolls down   I found that none of them worked in current Chrome when you want to use fragment links coming in from other pages    So calling www mydomain com page html foo from scratch will NOT offset your target in current Chrome with any of the given CSS solutions or JS solutions   There is also a jQuery bug report describing some details of the problem   SOLUTION  The only option I found so far that really works in Chrome is JavaScript that is not called onDomReady but with a delay      set timeout onDomReady   function         setTimeout delayedFragmentTargetOffset  500           add scroll offset to fragment target  if there is one  function delayedFragmentTargetOffset        var offset       target   offset        if offset           var scrollto   offset top - 95     minus fixed header height            html  body   animate  scrollTop scrollto   0             SUMMARY   Without a JS delay solutions will probably work in Firefox  IE  Safari  but not in Chrome

User · Answer

I m using  Jpsy s answer  but for performance reasons I m only setting the timer if the hash is present in the URL     function              Only set the timer if you have a hash       if window location hash            setTimeout delayedFragmentTargetOffset  500                  function delayedFragmentTargetOffset          var offset       target   offset          if offset             var scrollto   offset top - 80     minus fixed header height              html  body   animate  scrollTop scrollto   0                 target   highlight

User · Answer

For Chrome Safari Firefox you could add a display  block and use a negative margin to compensate the offset  like   a name        display  block      padding-top  90px      margin-top  -90px      See example http   codepen io swed pen RrZBJo

User · Answer

I solve my issue with scroll-margin-top property for the anchor element scroll-margin-top  100px   https   developer mozilla org en-US docs Web CSS scroll-margin-top

User · Answer

This is how I got it to finally go to the proper place when you click on the navigation  I added an event handler for the navigation clicks  Then you can just use  scrollBy  to move up on the offset   var offset   90        navbar li a   click function event        event preventDefault            this  attr  href    0  scrollIntoView        scrollBy 0  -offset

User · Answer

You could try this    lt style gt  h1 target   padding-top  50px     lt  style gt    lt a href   bar  gt Go to bar lt  a gt    lt h1 id  bar  gt Bar lt  h1 gt    Set the top padding value to the actual height of your header  This will introduce a slight extra gap at the top of your header  but it will only be visible when the user jumps to the anchor and then scrolls up  I ve made up that solution for my site right now  but it only shows a small fixed bar at the top of the page  nothing too high

User · Answer

The best way that I found to handle this issue is  replace 65px with your fixed element height    div target     padding-top  65px     margin-top  -65px      If you do not like to use the target selector you can also do it in this way    my-target       padding-top  65px      margin-top  -65px      Note  this example will not work if the target element have a backgound color that differant from his parent  for example    lt div style  background-color red height 100px   gt  lt  div gt   lt div class  my-target  style  background-color green height 100px   gt  lt  div gt    in this case the green color of my-target element will overwrite his parent red element in 65px  I did not find any pure CSS solution to handle this issue but if you do not have another background color this solution is the best

[html] Fixed page header overlaps in-page anchors

Examples related to html

Examples related to url

Examples related to anchor