offsetting an html anchor to adjust for fixed header

Question

I am trying to clean up the way my anchors work  I have a header that is fixed to the top of the page  so when you link to an anchor elsewhere in the page  the page jumps so the anchor is at the top of the page  leaving the content behind the fixed header  I hope that makes sense    I need a way to offset the anchor by the 25px from the height of the header  I would prefer HTML or CSS  but Javascript would be acceptable as well

User · Answer

This takes many elements from previous answers and combines into a tiny (194 bytes minified) anonymous jQuery function. Adjust fixedElementHeight for the height of your menu or blocking element.

    (function($, window) {
        var adjustAnchor = function() {

            var $anchor = $(':target'),
                    fixedElementHeight = 100;

            if ($anchor.length > 0) {

                $('html, body')
                    .stop()
                    .animate({
                        scrollTop: $anchor.offset().top - fixedElementHeight
                    }, 200);

            }

        };

        $(window).on('hashchange load', function() {
            adjustAnchor();
        });

    })(jQuery, window);

If you don't like the animation, replace

$('html, body')
     .stop()
     .animate({
         scrollTop: $anchor.offset().top - fixedElementHeight
     }, 200);

with:

window.scrollTo(0, $anchor.offset().top - fixedElementHeight);

Uglified version:

 !function(o,n){var t=function(){var n=o(":target"),t=100;n.length>0&&o("html, body").stop().animate({scrollTop:n.offset().top-t},200)};o(n).on("hashchange load",function(){t()})}(jQuery,window);

User · Answer

My solution combines the target and before selectors for our CMS  Other techniques don t account for text in the anchor  Adjust the height and the negative margin to the offset you need      target  before       content          display  block      height       180px      margin-top  -180px

User · Answer

I ran into this same issue and ended up handling the click events manually  like       mynav a   click    - gt       html  body   animate         scrollTop      this  attr  href    offset   top - 40      200   return false     Scroll animation optional  of course

User · Answer

Solutions with changing position property are not always possible  it can destroy layout  therefore I suggest this   HTML    lt a id  top  gt Anchor lt  a gt    CSS    top       margin-top  -250px      padding-top  250px      Use this    lt a id  top  gt  amp nbsp  lt  a gt    to minimize overlapping  and set font-size to 1px  Empty anchor will not work in some browsers

User · Answer

how about hidden span tags with linkable IDs that provide the height of the navbar    head1     padding-top  60px    height  0px    visibility  hidden       lt span class  head1  gt somecontent lt  span gt   lt h5 id  headline1  gt This Headline is not obscured lt  h5 gt    heres the fiddle  http   jsfiddle net N6f2f 7

User · Answer

As this is a concern of presentation  a pure CSS solution would be ideal  However  this question was posed in 2012  and although relative positioning   negative margin solutions have been suggested  these approaches seem rather hacky  create potential flow issues  and cannot respond dynamically to changes in the DOM   viewport   With that in mind I believe that using JavaScript is still  February 2017  the best approach  Below is a vanilla-JS solution which will respond both to anchor clicks and resolve the page hash on load  See JSFiddle   Modify the  getFixedOffset   method if dynamic calculations are required  If you re using jQuery  here s a modified solution with better event delegation and smooth scrolling    function document  history  location      var HISTORY SUPPORT      history  amp  amp  history pushState      var anchorScrolls         ANCHOR REGEX                  OFFSET HEIGHT PX  50                  Establish events  and fix initial scroll position if a hash is provided              init  function           this scrollToCurrent          window addEventListener  hashchange   this scrollToCurrent bind this          document body addEventListener  click   this delegateAnchors bind this                           Return the offset amount to deduct from the normal scroll position         Modify as appropriate to allow for dynamic calculations             getFixedOffset  function           return this OFFSET HEIGHT PX                         If the provided href is an anchor which resolves to an element on the        page  scroll to it          param   String  href         return  Boolean  - Was the href an anchor              scrollIfAnchor  function href  pushToHistory          var match  rect  anchorOffset         if  this ANCHOR REGEX test href             return false                 match   document getElementById href slice 1           if match            rect   match getBoundingClientRect            anchorOffset   window pageYOffset   rect top - this getFixedOffset            window scrollTo window pageXOffset  anchorOffset               Add the state to history as-per normal anchor links         if HISTORY SUPPORT  amp  amp  pushToHistory              history pushState     document title  location pathname   href                            return   match                         Attempt to scroll to the current location s hash              scrollToCurrent  function           this scrollIfAnchor window location hash                          If the click event s target was an anchor  fix the scroll position              delegateAnchors  function e          var elem   e target         if          elem nodeName      A   amp  amp          this scrollIfAnchor elem getAttribute  href    true                    e preventDefault                          window addEventListener       DOMContentLoaded   anchorScrolls init bind anchorScrolls          window document  window history  window location

User · Answer

You could just use CSS without any javascript   Give your anchor a class    lt a class  anchor  id  top  gt  lt  a gt    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

User · Answer

Pure css solution inspired by Alexander Savin   a name      padding-top  40px    margin-top  -40px    display  inline-block     required for webkit browsers        Optionally you may want to add the following if the target is still off the screen     vertical-align  top

User · Answer

You can do it without js and without altering html  It  s css-only   a id   before       content          display  block      height  50px      margin  -30px 0 0      That will append a pseudo-element before every a-tag with an id  Adjust values to match the height of your header

User · Answer

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    lt ul gt   lt li gt  lt a href   one  gt one lt  a gt  lt  li gt   lt li gt  lt a href   two  gt two lt  a gt  lt  li gt   lt li gt  lt a href   three  gt three lt  a gt  lt  li gt   lt li gt  lt a href   four  gt four lt  a gt  lt  li gt   lt  ul gt    And below that the headings where it should go to    lt h3 gt one lt  h3 gt   lt p gt text here lt  p gt    lt h3 gt two lt  h3 gt   lt p gt text here lt  p gt    lt h3 gt three lt  h3 gt   lt p gt text here lt  p gt    lt h3 gt four lt  h3 gt   lt p gt text here lt  p gt    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    lt h3 gt  lt span id  one  gt  lt  span gt one lt  h3 gt    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

User · Answer

You can achieve this without an ID using the a name  not  href   css selector  This simply looks for links with a name and no href e g   lt a name  anc1  gt  lt  a gt   An example rule might be   a name  not  href        display  block          position  relative           top  -100px      visibility  hidden

User · Answer

Borrowing some of the code from an answer given at this link  no author is specified   you can include a nice smooth-scroll effect to the anchor  while making it stop at -60px above the anchor  fitting nicely underneath the fixed bootstrap navigation bar  requires jQuery        dropdown-menu a href         on  click   function e          prevent default anchor click behavior    e preventDefault           animate       html  body   animate          scrollTop    this hash  offset   top - 60         300  function

User · Answer

I had been facing a similar issue  unfortunately after implementing all the solutions above  I came to the following conclusion    My inner elements had a fragile CSS structure and implementing a position relative   absolute play  was completely breaking the page design  CSS is not my strong suit    I wrote this simple scrolling js  that accounts for the offset caused due to the header and relocated the div about 125 pixels below  Please use it as you see fit   The HTML   lt div id   anchor  gt  lt  div gt   lt  --  anchor here is the anchor tag which is on your URL -- gt    The JavaScript     function          a href     not  href       click function         if  location pathname replace              this pathname replace             amp  amp  location hostname    this hostname           var target     this hash         target   target length   target       name     this hash slice 1               if  target length               html body   animate             scrollTop  target offset   top - 125   offsets for fixed header            1000           return false                          Executed on page load with URL containing an anchor tag    if   location href split      1            var target         location href split      1          if  target length               html body   animate             scrollTop  target offset   top - 125   offset height of header here too             1000           return false                      See a live implementation here

User · Answer

This was inspired by the answer by Shouvik - same concept as his  only the size of the fixed header isn t hard coded  As long as your fixed header is in the first header node  this should  just work     jslint browser  true  plusplus  true  regexp  true     function anchorScroll fragment         use strict       var amount  ttarget      amount      header   height        ttarget           fragment          html body   animate   scrollTop  ttarget offset   top - amount    250       return false     function outsideToHash          use strict       var fragment      if  window location hash            fragment   window location hash substring 1           anchorScroll fragment            function insideToHash nnode         use strict       var fragment      fragment     nnode  attr  href   substring 1       anchorScroll fragment        document  ready function           use strict          a href         bind  click    function     insideToHash this           outsideToHash

User · Answer

FWIW this worked for me    id   before     content        display  block    height       75px    margin-top  -75px    visibility  hidden

User · Answer

Adding to Ziav s answer  with thanks to Alexander Savin   I need to be using the old-school  lt a name       gt     lt  a gt  as we re using  lt div id       gt     lt  div gt  for another purpose in our code  I had some display issues using display  inline-block -- the first line of every  lt p gt  element was turning out to be slightly right-indented  on both Webkit and Firefox browsers   I ended up trying other display values and display  table-caption works perfectly for me    anchor     padding-top  60px    margin-top  -60px    display  table-caption

User · Answer

I found this solution    lt a name  myanchor  gt       lt h1 style  padding-top  40px  margin-top  -40px   gt My anchor lt  h1 gt   lt  a gt    This doesn t create any gap in the content and anchor links works really nice

User · Answer

You can also add an anchor with follow attr    text-indent -99999px   visibility  hidden  position absolute  top -80px        and give the parent container a position relative   Works perfect for me

User · Answer

Instead of having a fixed-position navbar which is underlapped by the rest of the content of the page  with the whole page body being scrollable   consider instead having a non-scrollable body with a static navbar and then having the page content in an absolutely-positioned scrollable div below   That is  have HTML like this      lt div class  static-navbar  gt NAVBAR lt  div gt   lt div class  scrollable-content  gt     lt p gt Bla bla bla lt  p gt     lt p gt Yadda yadda yadda lt  p gt     lt p gt Mary had a little lamb lt  p gt     lt h2 id  stuff-i-want-to-link-to  gt Stuff lt  h2 gt     lt p gt More nonsense lt  p gt   lt  div gt        and CSS like this    static-navbar     height  100px     scrollable-content     position  absolute    top  100px    bottom  0    overflow-y  scroll    width  100       This achieves the desired result in a straightforward  non-hacky way  The only difference in behaviour between this and some of the clever CSS hacks suggested above are that the scrollbar  in browsers that render one  will be attached to the content div rather than the whole height of the page  You may or may not consider this desirable   Here s a JSFiddle demonstrating this in action

User · Answer

I added 40px-height  vspace element holding the anchor before each of my h1 elements    lt div class  vspace  id  gherkin  gt  lt  div gt   lt div class  page-header  gt     lt h1 gt Gherkin lt  h1 gt   lt  div gt    In the CSS    vspace   height  40px     It s working great and the space is not chocking

User · Answer

I m facing this problem in a TYPO3 website  where all  Content Elements  are wrapped with something like    lt div id  c1234  class  contentElement  gt     lt  div gt    and i changed the rendering so it renders like this    lt div id  c1234  class  anchor  gt  lt  div gt   lt div class  contentElement  gt     lt  div gt    And this CSS    anchor      position  relative      top  -50px      The fixed topbar being 40px high  now the anchors work again and start 10px under the topbar   Only drawback of this technique is you can no longer use  target

User · Answer

As  moeffju suggests  this can be achieved with CSS  The issue I ran into  which I m surprised I haven t seen discussed  is the trick of overlapping previous elements with padding or a transparent border prevents hover and click actions at the bottom of those sections because the following one comes higher in the z-order   The best fix I found was to place section content in a div that is at z-index  1      Apply to elements that serve as anchors  offset-anchor     border-top  75px solid transparent    margin  -75px 0 0    -webkit-background-clip  padding-box    -moz-background-clip  padding    background-clip  padding-box        Because offset-anchor causes sections to overlap the bottom of previous ones     we need to put content higher so links aren t blocked by the transparent border   container     position  relative    z-index  1

User · Answer

For modern browsers  just add the CSS3  target selector to the page  This will apply to all the anchors automatically    target       display  block          position  relative           top  -100px      visibility  hidden

User · Answer

For the same issue  I used an easy solution   put a padding-top of 40px on each anchor

User · Answer

AlexanderSavin s solution works great in WebKit browsers for me   I additionally had to use  target pseudo-class which applies style to the selected anchor to adjust padding in FF  Opera  amp  IE9   a target     padding-top  40px     Note that this style is not for Chrome   Safari so you ll probably have to use css-hacks  conditional comments etc   Also I d like to notice that Alexander s solution works due to the fact that targeted element is inline  If you don t want link you could simply change display property    lt div id  myanchor  style  display  inline  gt      lt h1 style  padding-top  40px  margin-top  -40px   gt My anchor lt  h1 gt   lt  div gt

User · Answer

A further twist to the excellent answer from  Jan is to incorporate this into the  uberbar fixed header  which uses jQuery  or MooTools    http   davidwalsh name persistent-header-opacity   I ve tweaked the code so the the top of the content is always below not under the fixed header and also added the anchors from  Jan again making sure that the anchors are always positioned below the fixed header   The CSS    uberbar        border-bottom 1px solid  0000cc       position fixed       top 0       left 0       z-index 2000       width 100      a anchor       display  block      position  relative      visibility  hidden      The jQuery  including tweaks to both the  uberbar and the anchor approaches    lt script type  text javascript  gt    document  ready function          function               settings         var fadeSpeed   200  fadeTo   0 85  topDistance   30          var topbarME   function         uberbar   fadeTo fadeSpeed 1      topbarML   function         uberbar   fadeTo fadeSpeed fadeTo              var inside   false            do           window  scroll function                 position     window  scrollTop                if position  gt  topDistance  amp  amp   inside                      add events                 topbarML                        uberbar   bind  mouseenter  topbarME                       uberbar   bind  mouseleave  topbarML                   inside   true                            else if  position  lt  topDistance                   topbarME                        uberbar   unbind  mouseenter  topbarME                       uberbar   unbind  mouseleave  topbarML                   inside   false                                        content   css   margin-top       uberbar   outerHeight true                a anchor   css   top   -     uberbar   outerHeight true                    lt  script gt    And finally the HTML    lt div id  uberbar  gt       lt  --CONTENT OF FIXED HEADER-- gt   lt  div gt        lt div id  content  gt       lt  --MAIN CONTENT-- gt                lt a class  anchor  id  anchor1  gt  lt  a gt                lt a class  anchor  id  anchor2  gt  lt  a gt            lt  div gt    Maybe this is useful to somebody who likes the  uberbar fading dixed header

User · Answer

Here s the solution that we use on our site  Adjust the headerHeight variable to whatever your header height is  Add the js-scroll class to the anchor that should scroll on click      SCROLL ON CLICK    --------------------------------------------------------------------------     js-scroll   click function        var headerHeight   60          html  body   animate           scrollTop       attr this   href     offset   top - headerHeight        500       return false

User · Answer

The above methods don t work very well if your anchor is a table element or within a table  row or cell    I had to use javascript and bind to the window hashchange event to work around this  demo    function moveUnderNav         var  el  h   window location hash      if  h             el     h           if   el length  amp  amp   el closest  table   length                   body   scrollTop   el closest  table  tr   position   top - 26                         window       load function              moveUnderNav                on  hashchange   function              moveUnderNav                Note  The hashchange event is not available in all browsers

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

Examples related to javascript

Examples related to html

Examples related to css

Examples related to anchor

Examples related to offset