Anchor Link Offset to Other Pages with Fixed Header Size

Here is a snippet of code that will link to an anchor link on another page with a fixed offset which allows for a fixed header size, so the link appears further down below the header of further down the page.

The code snippet is documented.

If you know the pixel dimensions instead you can add the number as appose to the offsetsize variable, like so…

("html, body").animate({scrollTop: anchorLink.offset().top - 350 }, 500);

6 Comments

  1. Sara on November 4, 2019 at 9:06 am

    Terrific!
    I was looking exactly for a solution like this. Thank you so much!

  2. Louise on September 18, 2018 at 8:51 am

    I have an Avada site and this code does not work for me. The sticky header on Avada is called fusion-sticky-header. Should I replace that instead of “header” in the above code somehow? I have tried this but still not working.

    • Neil Gowran on September 19, 2018 at 12:22 am

      Sorry don’t know Avada enough to help

  3. Steve Deardorff on May 15, 2018 at 2:48 pm

    This is the only solution that seems to work for me – none of the CSS options work with WordPress. My only problem with this JS is that I cannot find how to control the amount of the offset. It’s about 100px too much. Any way to set the offset amount through this script? Thanks!

  4. Paul Lacey on April 23, 2018 at 9:31 am

    Neil the WordPress world is a better place for your code snippets.
    This is exactly the kind of thing that’s been bothering me… well since fixed headers, and I never got around to dealing with it in an intelligent way like this.

    Thank you!

    • Neil Gowran on April 23, 2018 at 9:17 pm

      Yes, I seem to be doing more fixed headers lately and was tackling this with html, css hacks, this does it more reliably.

Leave all Comment