Are you eager to make your Squarespace website stand out and keep visitors hooked? Discover the magic of automatic section scrolling! In this guide, we'll walk you through how to effortlessly add this captivating feature to your website.

Imagine seamlessly gliding through different sections of your website, effortlessly showcasing your best content without lifting a finger. That's the magic of automatic section scrolling. It's like a virtual tour guide, gently leading visitors through your website's highlights with grace and finesse.

CSS Code for Overlay to Banner Slideshow

Add the following code in your custom CSS section to give an overlay effect on the Banner Slideshow. Keep playing with the background-color values if you want to change the color or the overlay opacity.

/* Slideshow Overlay */

.slide-media-container:after {

content: "";

background-color: rgba(0,0,0,0.15);

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 9099;

}

.slide-content.list-item-card-background {

z-index: 99999999999999;

}

How to Implement Automatic Section Scrolling in Squarespace:

Getting started with automatic section scrolling in Squarespace is a breeze:

1. Add the Code: Simply copy and paste the provided JavaScript code into your page’s Header Code Injection section. This code will handle all the heavy lifting for you.

2. Customize Settings: Tailor the scrolling experience to suit your preferences. Adjust timing, direction, and target sections to create a personalized journey for your visitors.

3. Test and Preview: Once you've added the code, take your website for a spin. See how automatic scrolling effortlessly guides visitors through your website's highlights. Tweak settings as needed until it feels just right.

<script>

(function() {

// Configuration

let playInBackend = true; // Set to true to allow autoplay in backend editor

let timing = 3; // Time in seconds for each slide

let sectionSelector = '.user-items-list-section'; // Selector for the section to auto-scroll

let direction = 1; // 1 = forwards, 0 = backwards

// Do not adjust below this line

function AutoScrollLayout(element) {

let section = element ? document.querySelector(element) : document.querySelector(sectionSelector);

if (!section) return;

let isPaused = false;

let timer;

let buttons = section.querySelectorAll('button[class*="__arrow-button"]');

let editMode;

let popupMode;

let visible;

function setTimer() {

timer = setInterval(scrollToNext, timing * 1000);

}

function scrollToNext() {

editMode = document.querySelector('body.sqs-edit-mode-active');

popupMode = document.querySelector('.sqs-modal-lightbox-open');

if (!isPaused && !editMode && !popupMode && visible) {

buttons[direction].click();

}

}

function resetTimer() {

clearInterval(timer);

setTimer();

}

document.addEventListener('visibilitychange', function() {

isPaused = document.hidden;

});

section.addEventListener('mousedown', function() {

isPaused = true;

});

section.addEventListener('mouseup', function() {

isPaused = false;

resetTimer();

});

if (!!window.IntersectionObserver) {

let observer = new IntersectionObserver((entries, observer) => {

entries.forEach(entry => {

visible = entry.isIntersecting;

});

}, { rootMargin: "-75px 0px -75px 0px" });

observer.observe(section);

}

setTimer();

}

window.addEventListener('load', function() {

let sections = sectionSelector.split(',');

sections.forEach(section => {

if (window.top == window.self || playInBackend) {

AutoScrollLayout(section.trim());

}

});

});

}());

</script>

The above code snippets are developed according to the needs of modern Squarespace customisations. Contact us if you want more help about anything Squarespace related.

More on the Blog!