Scroll Down Arrow Indicator
What You'll Create
A minimal SVG arrow fixed at the bottom center of the viewport that invites visitors to scroll. Clicking the arrow smoothly scrolls to the next page section, automatically detecting which section is currently in view and navigating to the one below it.
The Problem It Solves
Full-height hero sections can leave visitors unsure there's more content below. While visual cues help, adding functional scroll-to-next behavior requires JavaScript that understands page structure. This technique provides both the visual indicator and smart section-aware navigation.
Perfect For
Full-screen hero sections, landing pages with multiple sections, portfolio homepages, storytelling layouts, immersive brand experiences.
What Makes This Different
The arrow stays perfectly centered at the bottom of the screen no matter how wide the browser window is. When clicked, it intelligently figures out which section you're currently viewing and smoothly scrolls to the next one - no need to set up anchor links or specify destinations. The scroll animation is smooth and polished, not an instant jump. The minimal SVG arrow design adapts to any brand aesthetic and can be easily restyled.
Details
Section Type: Fluid & Classic
Code Type: CSS + JavaScript
Prerequisites: Multiple page sections (works automatically with Squarespace's
.page-sectionstructure)Toolkit Title: Scroll Down Arrow
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