Jump to content

Home Page Navigation Scroll + Parallax Scroll - not working

Recommended Posts

Hi everyone, 

Straight up I'm not a coder but I'm trying to achieve two things on my page:

1. Smooth Home page navigation scroll using anchors 

2. Parallax Scroll where images are blocked in the background and the next section overlaps as you scroll down.

Both codes work idividually, however when I combine both in the Custom CCS section, the Parallax code works and the smooth navigation stops working. What happens is when I click on a menu item, it jumps straight to that section and I loose that "smooth scroll" effect. 

Can you guys help me out? is it possible to have both effects?

I've posted the codes I'm using at the end. 

Thanks in advance!



This one in the CSS Custom section: 

scroll-behavior: smooth;


This one in the Code Injection Footer section: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

  $('.has-background:not(:has(.sqs-video-background))').each(function() {
    var findImage = $(this).find('.section-background img');
    var imgUrl = findImage.data('src') + '?format=2500w';
    var dimensions = findImage.data('image-dimensions');
    var imgWidth = dimensions.substr(0, dimensions.indexOf('x'));
    var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1);
        bleed: 0,
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: .5,
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
    }, 100)

<style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style>

Edited by JenniBabs
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic


Are you on a version 7 or version 7.1 site? I have the same parallax code on my 7.1 site and have just tested with the smooth scrolling anchor link and it works. Have you got a link to your site also?

Also for your css code for the smooth scrolling is it the below, as cant see the html bit mentioned above 🙂 ?

html {
scroll-behavior: smooth;

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.