Titulo do Artigo

Subtitulo do Artigo

Texto lorem ipsun dolon text...

A Humble Anchor Link

To create a page anchor, give an element an id. That’s it. You can use all sorts of elements as page anchors, though it’s pretty common to use headings.

<h1 id="my-anchor">Page anchor</h1>

Now you can link to the page anchor by using # with the id as an href.

<a href="#my-anchor">Jump to the page anchor</a>

There are two special values you can use as the href of an anchor link: #top or simply #. They both do the same thing, taking you to the very top of the page. No need to create a page anchor for these.

Let’s see these anchor links in action.

DemoAnchor Link: Basic

Notice in the demo how clicking an anchor link adds a hash (like #my-anchor) to the page’s URL in the address bar — which can be copied and used to link directly to a page anchor, like this.

Now let’s see what adding a little CSS can do.

Adding Smooth Scrolling

In the previous demo, the jump to the page anchor is instant, which can be a little disorienting. Fortunately, we can enable smooth scrolling with just CSS.

html {
  scroll-behavior: smooth;
}

Now give those anchor links another go.

DemoAnchor Link: Smooth

Adding Scroll Margin

Our anchor links so far have scrolled the page anchor to the very top edge of the viewport. Wouldn’t it be nice if there was a little breathing room there? We can make that happen by setting scroll-margin-top on the page anchor.

h1 {
  scroll-margin-top: 40px;
}

This will leave 40px of space between the top of the viewport and the page anchor. Check it out.

DemoAnchor Link: Smooth + Margin

This trick is super useful when you have a sticky header, to push page anchors down a bit so they aren’t positioned behind it.

Adding Targeted Page Anchor Styles

You can use the CSS :target pseudo-class to add styling to a page anchor when jumping to it.

h1:target {
  color: #71a819; /* green */
}

In this demo, clicking “Jump to the page anchor” enables the CSS above, making the page anchor text green. Clicking “Jump back to top” causes the <h1> to no longer be targeted, so the text will no longer be green.

DemoAnchor Link: Smooth + Margin + Styling

Fancier Target Styling

We can do more complex things with :target than just changing text color. Here’s a demo that highlights areas of content and animates a “Back to top” link into view.

DemoAnchor Link: Fancier Styling

Here’s the (abbreviated) HTML to show how things are set up.

<nav>
  <a href="#kiwis">Kiwis</a>
  <a href="#limes">Limes</a>
  <a href="#pears">Pears</a>
</nav>

<article>
  <h1 id="kiwis">Kiwis</h1>
  <p><!-- blurb about kiwis --></p>
</article>

<!-- more article elements here -->

<a class="back-to-top" href="#top">Back to top</a>

The article highlighting is accomplished with this CSS.

/* border is initially transparent */
article {
  border: 3px solid transparent;
}

/* border turns green for an article when the targeted h1 is within */
article:has(h1:target) {
  border-color: #71a819;
}

And here’s the CSS to show/hide the “Back to top” link.

.back-to-top {
  /* position link to be fixed in top right corner */
  position: fixed;
  top: 10px;
  right: 10px;

  /* link is initially faded out and shifted off right edge of viewport */
  opacity: 0;
  translate: calc(100% + 10px);

  /* half a second transition duration */
  transition: all 0.5s;
}

/* when body has a targeted h1 within, fade link in and shift into view */
body:has(h1:target) .back-to-top {
  opacity: 1;
  translate: 0px;
}

Nested Scrolling

All the examples so far had a single scroll container: the page itself. However, it’s possible to have nested scroll containers — for example, a scrollable <div> in the page. If you put a page anchor within a nested scroll container, anchor links pointing to it will scroll all necessary containers to bring the target into view. Neat!

Here’s a demo. Note that the scroll positions feel a bit off — scroll-margin hasn’t been added. We’ll talk about why next.

DemoNested Scroll Anchor Link: Without Padding