Scroll Indicator with Auto-Hide

Code Toolkit
Written By Squarestylist Support

What You'll Create

A scroll indicator in Squarespace that displays "SCROLL" text with an animated line that disappears as users begin scrolling, then reappears when back at the top of the page.

The Problem It Solves

Visitors sometimes don't realize there's more content below the fold. This technique adds a subtle visual cue that encourages scrolling while automatically hiding once they start exploring.

Perfect For

Full-screen hero sections, Landing pages, Portfolio homepages, Immersive experiences, Single-page sites.

What Makes This Different

Detects when users scroll past 100px and smoothly fades the indicator out of view. The indicator automatically reappears when scrolling back to top.

Details

  • Section Type: Fluid & Classic

  • Code Type: CSS + JavaScript

  • Prerequisites: Markdown block with "SCROLL" text in first section

  • Toolkit Title: Scroll Indicator 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

Get Access to Standout Squarespace →
Squarestylist Support
Previous

Reveal Section on Scroll Back
Next

Portfolio Hover Follow Buttons