Make anchor link go some pixels above where it s linked to

Question

I m not sure the best way to ask search for this question   When you click on an anchor link  it brings you to that section of the page with the linked-to area now at the VERY TOP of the page  I would like the anchor link to send me to that part of the page  but I would like some space at the top  As in  I don t want it to send me to the linked-to part with it at the VERY TOP  I would like 100 or so pixels of space there   Does this make sense  Is this possible    Edited to show code - it s just an anchor tag    lt a href   anchor  gt Click me  lt  a gt    lt p id  anchor  gt I should be 100px below where I currently am  lt  p gt

User · Answer

This is also a good solution  Make a div above the destination div like this and link the a to this div   lt div class  quot destination quot  id  quot link quot  gt  lt  div gt     Needs to be above the destination      destination       position absolute      z-index -1      left 0      margin-top -100px    height of nav

User · Answer

If you use explicit anchor names such as    lt a name  sectionLink  gt  lt  a gt   lt h1 gt Section lt h1 gt    then in css you can simply set  A name        padding-top 100px      This will work as long as your HREF anchor tags don t also specify a NAME attribute

User · Answer

window addEventListener  hashchange   function          window scrollTo window scrollX  window scrollY - 100         This will allow the browser to do the work of jumping to the anchor for us and then we will use that position to offset from   EDIT 1   As was pointed out by  erb  this only works if you are on the page while the hash is changed  Entering the page with a  something already in the URL does not work with the above code  Here is another version to handle that      The function actually applying the offset function offsetAnchor         if location hash length     0            window scrollTo window scrollX  window scrollY - 100               This will capture hash changes while on the page window addEventListener  hashchange   offsetAnchor       This is here so that when you enter the page with a hash     it can provide the offset in that case too  Having a timeout    seems necessary to allow the browser to jump to the anchor first  window setTimeout offsetAnchor  1      The delay of 1 is arbitrary and may not always work right  although it did in my testing     NOTE  To use jQuery  you could just replace window addEventListener with   window  on in the examples  Thanks  Neon   EDIT 2   As pointed out by a few  the above will fail if you click on the same anchor link two or more times in a row because there is no hashchange event to force the offset   This solution is very slightly modified version of the suggestion from  Mave and uses jQuery selectors for simplicity     The function actually applying the offset function offsetAnchor       if  location hash length     0        window scrollTo window scrollX  window scrollY - 100             Captures click events of all  lt a gt  elements with href starting with     document  on  click    a href         function event         Click events are captured before hashchanges  Timeout      causes offsetAnchor to be called after the page jump    window setTimeout function         offsetAnchor         0           Set the offset when entering page with hash present in the url window setTimeout offsetAnchor  0     JSFiddle for this example is here

User · Answer

Even better solution    lt p style  position relative   gt       lt a name  anchor  style  position absolute  top -100px   gt  lt  a gt      I should be 100px below where I currently am   lt  p gt    Just position the  lt a gt  tag with absolute positioning inside of a relatively positioned object   Works when entering the page or through a hash change within page

User · Answer

I just have the same problem  I have a nav posited pixed and i want the angkor to start under the nav  The solution of window addEventListener    not work for me because i set my page to be scroll-behavior smooth so it set the offset instead scroll to the angkor  the setTimeout   work if the time is anough for scroll to the end but it still not looking good  so my solution was to add a posited absolute div in the angkor  with height  the height of the nav  and bottom 100   in this case this div ended in the top of the angkor element  and start at the position where you what the angkor to scroll to  now all what i do is set the angkor link to this absolute div and the wor done      x000D   x000D  html body  x000D      margin 0  x000D      padding 0  x000D      scroll-behavior smooth  x000D    x000D   x000D  nav   x000D      height 30px  x000D      width 100   x000D      font-size 20pt  x000D      text-align center  x000D      color white  x000D      background-color black  x000D      position relative  x000D    x000D   x000D   my nav  x000D      position fixed  x000D      z-index 3  x000D    x000D   fixer nav  x000D      position static  x000D    x000D   x000D   angkor  x000D      position absolute  x000D      bottom 100   x000D      height 30px  x000D    x000D   lt nav id  my nav  gt  lt a href   angkor  gt fixed position nav lt a  gt  lt  nav gt  x000D   lt nav id  fixer nav  gt  lt  nav gt  x000D   x000D   lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Pellentesque nec lacus vel eros rutrum volutpat  Cras ultrices enim sit amet odio dictum  eget consectetur mi pellentesque  Sed mollis gravida nulla  eu euismod turpis efficitur id  Integer pretium posuere fringilla  Aenean laoreet  augue non pharetra elementum  lectus massa congue orci  a imperdiet neque enim ut dui  Praesent commodo orci bibendum leo suscipit viverra  Nunc fermentum semper eleifend  Pellentesque suscipit nulla aliquet  egestas lectus sed  egestas dui  Vivamus scelerisque maximus nibh  ac dignissim nunc tempor a  Praesent facilisis non lacus et aliquam  Proin ultricies lacus vitae nibh ullamcorper gravida  Proin elit arcu  convallis eget posuere quis  placerat id augue  Fusce ex risus  tempus nec orci vitae  feugiat faucibus quam  Integer risus metus  ornare et rhoncus vitae  accumsan a urna  x000D   lt  p gt  x000D   x000D   lt nav gt  lt div id  angkor  gt  lt  div gt The angkor lt  nav gt  x000D   x000D   lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Pellentesque nec lacus vel eros rutrum volutpat  Cras ultrices enim sit amet odio dictum  eget consectetur mi pellentesque  Sed mollis gravida nulla  eu euismod turpis efficitur id  Integer pretium posuere fringilla  Aenean laoreet  augue non pharetra elementum  lectus massa congue orci  a imperdiet neque enim ut dui  Praesent commodo orci bibendum leo suscipit viverra  Nunc fermentum semper eleifend  Pellentesque suscipit nulla aliquet  egestas lectus sed  egestas dui  Vivamus scelerisque maximus nibh  ac dignissim nunc tempor a  Praesent facilisis non lacus et aliquam  Proin ultricies lacus vitae nibh ullamcorper gravida  Proin elit arcu  convallis eget posuere quis  placerat id augue  Fusce ex risus  tempus nec orci vitae  feugiat faucibus quam  Integer risus metus  ornare et rhoncus vitae  accumsan a urna  x000D   x000D  Lorem ipsum dolor sit amet  consectetur adipiscing elit  Pellentesque nec lacus vel eros rutrum volutpat  Cras ultrices enim sit amet odio dictum  eget consectetur mi pellentesque  Sed mollis gravida nulla  eu euismod turpis efficitur id  Integer pretium posuere fringilla  Aenean laoreet  augue non pharetra elementum  lectus massa congue orci  a imperdiet neque enim ut dui  Praesent commodo orci bibendum leo suscipit viverra  Nunc fermentum semper eleifend  Pellentesque suscipit nulla aliquet  egestas lectus sed  egestas dui  Vivamus scelerisque maximus nibh  ac dignissim nunc tempor a  Praesent facilisis non lacus et aliquam  Proin ultricies lacus vitae nibh ullamcorper gravida  Proin elit arcu  convallis eget posuere quis  placerat id augue  Fusce ex risus  tempus nec orci vitae  feugiat faucibus quam  Integer risus metus  ornare et rhoncus vitae  accumsan a urna  x000D   x000D   lt  p gt  x000D   x000D   x000D

User · Answer

A variant of Thomas  solution  CSS element element selectors can be handy here   CSS   paddedAnchor    position  relative     paddedAnchor  gt  a    position  absolute    top  -100px      HTML   lt a href   myAnchor  gt Click Me  lt  a gt    lt span class  paddedAnchor  gt  lt a name  myAnchor  gt  lt  a gt  lt  span gt    A click on the link will move the scroll position to 100px above wherever the element with a class of paddedAnchor is positioned   Supported in non-IE browsers  and in IE from version 9  For support on IE 7 and 8  a  lt  DOCTYPE gt  must be declared

User · Answer

Based on  Eric Olson solution just modify a little to include the anchor element that I want to go specifically     Function that actually set offset function offsetAnchor e           location hash length different to 0 to ignore empty anchor  domain me page       if  location hash length     0               Get the Y position of the element you want to go and place an offset         window scrollTo 0    e target hash  position   top - 150               Catch the event with a time out to perform the offset function properly   document  on  click    a href         function  e        window setTimeout function                 Send event to get the target id later         offsetAnchor e          10

User · Answer

try this code  it has already a smooth animation when clicked the link     document  on  click    a href         function  event        event preventDefault            html  body   animate           scrollTop      attr this   href    offset   top - 100        500

User · Answer

Working only with css you can add a padding to the anchored element  as in a solution above  To avoid unnecessary whitespace you can add a negative margin of the same height    anchor       padding-top  50px      margin-top  -50px      I am not sure if this is the best solution in any case  but it works fine for me

User · Answer

Using only css and having no problems with covered and unclickable content before  the point of this is the pointer-events none    CSS   anchored  before       content          display  block      position  relative      width  0      height  100px      margin-top  -100px      HTML   lt a href   anchor  gt Click me  lt  a gt   lt div style  pointer-events none   gt   lt p id  anchor  class  anchored  gt I should be 100px below where I currently am  lt  p gt   lt  div gt

User · Answer

This should work         document  ready function             a   on  click   function  e               e preventDefault             var target   this hash               target     target              html  body   stop   animate            scrollTop    target offset   top-49        900   swing   function                       console log window location            return false                Just change the  top-49 to what fits with your anchor link

User · Answer

I just found an easy solution for myself  Had an margin-top of 15px  HTML   lt h2 id  Anchor  gt Anchor lt  h2 gt    CSS  h2 margin-top -60px  padding-top 75px

User · Answer

Best Solution   lt span class  anchor  id  section1  gt  lt  span gt   lt div class  section  gt  lt  div gt    lt span class  anchor  id  section2  gt  lt  span gt   lt div class  section  gt  lt  div gt    lt span class  anchor  id  section3  gt  lt  span gt   lt div class  section  gt  lt  div gt    lt style gt   anchor    display  block    height  115px    same height as header     margin-top  -115px    same height as header     visibility  hidden     lt  style gt

User · Answer

I had this same issue  and there s a really quick and simple solution without CSS of JS  Just create a separate unstyled div with an ID like  quot aboutMeAnchor and just place it well above the section you actually want to land on

User · Answer

i was facing the similar issue and i resolved by using following code     document  on  click    a page-scroll   function event            var  anchor     this           var desiredHeight     window  height   - 577             html  body   stop   animate               scrollTop     anchor attr  href    offset   top - desiredHeight            1500   easeInOutExpo            event preventDefault

User · Answer

I know this is a bit late  but I found something very important to put in your code if you are using Bootstrap s Scrollspy   http   getbootstrap com javascript  scrollspy   This was driving me nuts for hours   The offset for scroll spy MUST match the window scrollY or else you ll run the risk of    Getting a weird flicker effect when scrolling Youll find that when you click on anchors  youll land in that section  but scroll spy will assume you are a section above it      x000D   x000D   var body      body    x000D      body scrollspy   x000D           target     nav   x000D           offset   100   this must match the window scrollY below or you ll have a bad time mmkay x000D      x000D   x000D    window  on  hashchange   function      x000D          window scrollTo window scrollX  window scrollY - 100   x000D      x000D   x000D   x000D

User · Answer

lt a href   anchor  gt Click me  lt  a gt    lt div style  margin-top  -100px  padding-top  100px   id  anchor  gt  lt  div gt   lt p gt I should be 100px below where I currently am  lt  p gt

User · Answer

Here s the 2020 answer for this    anchor     scroll-margin-top  100px      Because it s widely supported

User · Answer

To link to an element  and then  position  that element an arbitrary distance from the top of the page  using pure CSS  you d have to use padding-top  that way the element is still positioned at the top of the window  but it appears  visibly  to be positioned some distance from the top of the view-port  for example    lt a href   link1  gt Link one lt  a gt   lt a href   link2  gt Link two lt  a gt    lt div id  link1  gt      The first   lt  div gt    lt div id  link2  gt      The second   lt  div gt    CSS   div          just to force height  and window-scrolling to get to the elements         Irrelevant to the demo  really        margin-top  1000px      height  1000px      link2          places the contents of the element 100px from the top of the view-port        padding-top  100px      JS Fiddle demo   To use a plain JavaScript approach   function addMargin         window scrollTo 0  window pageYOffset - 100      window addEventListener  hashchange   addMargin     JS Fiddle demo

User · Answer

The easiest solution   CSS   link       top -120px     - some pixels above         position relative      z-index 5      HTML   lt body gt       lt a href   link  gt Link lt  a gt       lt div gt           lt div id  link  gt  lt  div gt    this div should placed inside a target div in the page           text         text         text      lt div gt   lt  body gt

User · Answer

This will work without jQuery and on page load    function         if  document location hash            setTimeout function                 window scrollTo window scrollX  window scrollY - 100              10

User · Answer

Eric s answer is great  but you really don t need that timeout  If you re using jQuery  you can just wait for the page to load  So I d suggest changing the code to      The function actually applying the offset function offsetAnchor         if  location hash length     0            window scrollTo window scrollX  window scrollY - 100               This will capture hash changes while on the page   window  on  hashchange   function          offsetAnchor            Let the page finish loading    document  ready function         offsetAnchor          This also gets us rid of that arbitrary factor

User · Answer

Put this in style     hash link tag margin-top  -50px  position  absolute     and use this class in separate div tag before the links  example    lt div class  hash link tag  id  link1  gt  lt  div gt    lt a href   link1  gt Link1 lt  a gt    or use this php code for echo link tag   function HashLinkTag  id        echo   lt div id   id  class  hash link tag  gt  lt  div gt

[javascript] Make anchor link go some pixels above where it's linked to

Examples related to javascript

Examples related to html

Examples related to css

Examples related to anchor