• Skip to primary navigation
  • Skip to main content
  • Skip to footer
  • Home
  • Blog
  • Search

Kevin Dees

Full-Stack PHP Development

  • Twitter
  • Github
  • LinkedIn
You are here: Home / CSS / Jump-to Links Done Right

Jump-to Links Done Right

April 20, 2020 by Kevin Leave a Comment

shallow focus photography of brown frog

A quick CSS tip to kick off the week: to stop jump-to links from touching the top of the page when clicked use the scroll-margin-top property. Using the CSS property will give your design a touch of breathing room.

h1[id]:focus
{
    scroll-margin-top: 1rem;
    outline: 0;
}

Now, you will not want the page scroll “snapping” scroll-margin-top creates to be always-on (you will only want it when a jump link is clicked). The key to targeting only jump-to links is to use tabindex="-1" and the :focus pseudo-class. These additions keep the scroll-margin property isolated to the jump-to link.

<body>
    <a href="#one">Jump to one</a>
    <h1 tabindex="-1" id="one">One</h1>
</body>

You can read more about scroll-margin-top in the MDN web docs.

Filed Under: CSS, Design, HTML, Tips, Web

Reader Interactions

Leave a Reply Cancel 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.

Footer

Get Dare To Code

Get the latest on full-stack PHP development in your inbox with a bi-weekly lesson from Kevin Dees.

Copyright © 2021 · Kevin Dees · Log in