Getting the anchor links to align properly

I’ve seen many people ask about how to make anchor links align properly at the top of the screen, right under the header.

A lot of the times, the problem is that the anchored section sits under the header.

This causes problems because that’s the not content that was intended to show when scrolled to.

Background

Those kinds of on-page links are usually called “anchor links.” Technically, anchors are what the <a> stands for (they are called anchor elements), so to be overly pedantic, pretty much all hyperlinks are “anchor” links, because they are made with anchor elements. However, normally, among web developers and designers, “anchor links” refer to on-page sections that have an identifier that hyperlinks can scroll to for better navigation.

Basic Setup

Here’s how you set one up. It’s pretty simple.

1. In the section you want the anchor link to land (or scroll to), you’ve got to start with adding the identifier in the “custom ID” field. Let’s start with something simple, add “here” (without the quotation marks) in the field. Or if it’s in regular HTML, it should be something like this: <p id="here">You'll arrive here</p>
2. To make links jump to that spot, add “#here” inside the hyperlink reference. Like this:
   <a href="#here">This link jumps</a>
3. If the link is supposed to lead to a spot off-page, like if it’s in the navigation menu, then just add the page URL in front (and you might need to add the domain in front if needed). Like this:
   <a href="/pageurl/#here">This link jumps</a>

The Problem

The problem with using anchor links like explained above is that browsers scroll (or snap) so that the top of the section aligns with the top of the browser. This means that most of the time, the top of the section is covered by the header (which is normally stacked to the top for better navigation).

And that annoys everyone.

The Solution

Here’s a CSS hack that’ll give you perfect control over where the section sits.

The method

We’re going to use an imperceptible anchor element to add the height of the header to the top of the intended section. So, we’re going to make the anchor separate. I’ll show you how!

The video

The video walks through some explanation, and then gets into how to fix things. The accompanying code and written explanation is below the video.

The code

First we’ll have to add an extra html element inside where the anchor will be. We’re not making the actual anchor be the actual section, but add a hidden anchor inside the section we want to scroll to.
Like this: <h2 class="anchor">Jump here<span id="here"></span></h2>

Depending on the page builder or system you’re using, there are lots of ways you can do this. The easiest way if you’re using a page builder is to make the first module an html code block and just add the <span id="here"></span> and add the class “anchor” to the section.

So basically, the actual anchor (with the id) should be as much a direct descendant as possible of the element with the class “anchor.” Also the element with the class “anchor” will be the part that ends up aligning to right under the header.

OK, now that we got that sorted out, here’s the CSS we are going to use.

.anchor {
	position: relative;
}
.anchor #here, 
.anchor #there, 
.anchor #whatever {
	position: absolute;
	left: 0;
	top: -120px; /* change this value to match the height of the header */
	height: 0;
	width: 0;
}

Some explanation:

Once we apply a relative position to the .anchor, the descendant, when given an absolute position will be placed accordingly with the parent with the relative position as the starting point. This allows us to push the element with the id up, giving us the space we need.

CSS selectors can be appended with commas, so we can have all of the anchors together in one spot to avoid superfluous code.

Although, if you’re CSS savvy, it’s worth noting that most page builder sections are automatically positioned, meaning you might not have to add the relative position for .anchor. However, please note that if you have top paddings and stuff, you’ll have to adjust the top value accordingly, and also remember that you can adjust it for mobile with media queries.

Conclusion

So there you have it.

I saw a lot of people asking about this in a lot of online groups, so I decided to post this. Hope this helps!

update: I had written bad code. fixed that. Sorry. heh.

[sc name=”learn-css”]