⚠️ Note that this post hasn't been updated for at least a year and the information may be outdated, proceed with caution! (Last updated: November 6, 2023)
If you're scrolling to an anchor link on a HubSpot page, you may find that you need to offset it by adding some additional space above:
- Perhaps you have a fixed or sticky header and your scroll link is appearing behind it
- Perhaps you don't like how there's no whitespace between the top of the page and the anchor link
Luckily, there's a relatively new CSS property called scroll-margin-top that you can use to do this.
In HubSpot, anchor links you insert into the page in a Rich Text editor (from Insert > Anchor Link) look like this in the HTML:
<a id="anchor-link" data-hs-anchor="true"></a>
So you can target links with data-hs-anchor="true" in your CSS, like this:
a[data-hs-anchor="true"] {
scroll-margin-top: 2.5rem;
}
In this case we've used an offset of 2.5rem, but you could use any other measurement (e.g. 40px).
If you have any other type of anchor links (e.g. in a custom module), you could also use the scroll-margin-top property to offset them.
