If you’re using anchor links in Bricks Builder and want the linked section to appear in the middle of the screen—not stuck to the top—there’s an easy fix.
Instead of using JavaScript, you can simply apply a little CSS using the scroll-margin-top
property.
Here’s how to do it:
- Select the section or element you want to scroll to in Bricks.
- Give it a class like
.scroll-target
(or any custom class name). - Then add this CSS:
.scroll-target {
scroll-margin-top: 50vh; /* You can adjust this to control vertical offset */
}
That’s it!
What It Does:
scroll-margin-top
tells the browser to leave space above the element when it’s scrolled into view.50vh
means 50% of the viewport height, so the section appears centered.
This is especially helpful when:
- You have a sticky header that hides the top of sections
- You want smoother visual spacing for your anchor jumps
- You’re building single-page layouts or navigation-driven sections