Smooth Scroll Offset Anchor Links with CSS

9 Comments

  1. Hey,

    Granted, I know very little about CSS or any code, but it looks like you have given us an example snipet of what you are saying is not the best way, but haven’t given the example of what you suggest. Like you say, I have seen the above in many places. I still can’t get it to work.

    1. Hi Lindsay. Sorry if I wasn’t clear, but the first method works for me (try this link) and is the one I recommend using. The second is just something that I found being posted quite a bit and its not recommended.

  2. commenting to follow

  3. Atomic

    Like Lindsay, I can’t get this to work. Refreshing the page gives different results. Sometimes scrolls too far and the offset doesn’t always apply.

    1. If you’d like to post the code you’re using here or an example URL I’d be happy to take a quick look.

  4. Andrew

    Awesome! Thanks for this Bryan :)

    1. No problem Andrew!

  5. Andrew

    Actually, I thought this was working but now it’s not. I have a position fixed header that has a height of 100px. I have a link within the first div following the header that has a link to a div with the id of “about” . When I click the anchor it isn’t adding the required 100px of space to offset the height of the header. Am I implementing this incorrectly?

    html {
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    }

    :target:before {
    content: “”;
    display: block;
    height: 100px;
    margin: -100px 0 0;
    }

    1. Do you have a URL I could take a look at?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.