Smooth Scroll Anchor Links for Squarespace

What You'll Create

Anchor links that smoothly scroll visitors to specific sections instead of jumping instantly. Landing positions are offset so content doesn't hide behind fixed headers.

The Problem It Solves

Default anchor links jump instantly, which can be disorienting. Additionally, Squarespace's default anchor behavior often lands content behind sticky headers.

Perfect For

One-page websites, Service pages with jump links, FAQ sections, Long-form content navigation, Table of contents

What Makes This Different

This technique enables browser-native smooth scrolling for all anchor links on your site, then uses hidden anchor points you create with code blocks to control exactly where visitors land. The landing offset accounts for sticky headers, so your target content is always fully visible. The anchor elements themselves are invisible to visitors.

Details

• Code Type: CSS

• Prerequisites: Code block for anchor placement, navigation links with anchor references

• Toolkit Title: Anchor Links 7.1

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support