How do I create a smooth scrolling website that jumps to sections?

Zenia · May 20, 2021

Site URL: https://vuvuzela-lilac-s52g.squarespace.com/config/pages

Hi there,

I'm looking to create a website with a smooth scrolling feature that jumps to the specific sections on the page.

The website linked below is an example of what I'm looking to do.
https://cultldn.com/

Find below link to my website and password:
Url:https://vuvuzela-lilac-s52g.squarespace.com/config/pages
Password: 123456

Anyone who can help me with some css to create this effect on my website?

Thank you in advance.

Kindest,

Edited May 20, 2021 by Zenia

Wolfsilon · May 20, 2021

Hello there!

You will need to have a Squarespace subscription that allows you to use Javascript. If you have one, you can use Scrollify.JS to animate between sections.

We can't access your website config area, so without seeing your website, I can't give you a copy and paste code that will work. But hopefully this will point you in the right direction!

-Dan

Zenia · May 27, 2021

On 5/20/2021 at 5:17 PM, Wolfsilon said:

Hello there!

You will need to have a Squarespace subscription that allows you to use Javascript. If you have one, you can use Scrollify.JS to animate between sections.

We can't access your website config area, so without seeing your website, I can't give you a copy and paste code that will work. But hopefully this will point you in the right direction!

-Dan

Hi Wolfsilon,

Apologies for late response. Only saw your response just now.

See below for URL and password:

URL: https://zelutionsagency.com/
PW: 123456

I would appreciate your help with a copy and paste code and a how to guide - to make all pages on the website snap scroll // smooth scroll.

Thank you so much.

Kindest,

Wolfsilon · May 27, 2021

Hello,

To install this plugin, just make sure that you are using a javascript enabled subscription, I believe that it is available on the Business plan. After you've set up your layout, I would then install the plugin because it will sometimes cause issues with the editor mode and drag-and-dropping blocks. The code I will provide uses several 'Script libraries. The first being, Jquery, a Jquery Easing library, and the Scrollify library.

Start by navigating on your website. Home > Settings > Advanced > Code Injection.

To install the 'Scripts, copy and paste the following in your "Header Code Injection" field:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.21/jquery.scrollify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js" integrity="sha512-0QbL0ph8Tc8g5bLhfVzSqxe9GERORsKhIn1IrpxDAgUsbBGz/V7iSav2zzW325XGd1OMLdL4UiqRJj702IeqnQ==" crossorigin="anonymous"></script>

Immediately following those links, you'll begin setting up the functions, events, and features for Scrollify. Copy and paste the following code:

<script>
  $(document).ready(function() {
    $.scrollify({
      section: ".page-section",
      sectionName: ".page-section",
      easing: "jswing",
      scrollSpeed: 800,
      standardScrollElements: ".swiper-wrapper",
      offset: 0,
      overflowScroll: true,
      setHeights: false,
      scrollbars: true,
      touchScroll: false,
       before: function() {
        $('.page-section').removeClass('active')
        current = $.scrollify.current();
        current.addClass('active')
      },
    });
  });
</script>

Here, we're telling Scrollify the objects or sections that should be identified and what the app should do with them. Essentially, we need each ".page-section" to be scroll-snapped into position. If you've taken a look at the Scrollify website, you'll see all of the options and methods that can be applied. You'll also have a better description of what they do. I've included a full code that I've used in the past because it provides a good example for demonstrating the flexibility of Scrollify.

For example: I have a page that uses a "Swiper" carousel for a touch enabled/mouse-wheel scrolling gallery. Scrollify will let me identify this as a "standardScrollElement" and it won't snap to the next section when a user is interacting with that gallery. You can remove this if you have no "micro-interactions" on your website or use it for certain circumstances. Otherwise, when a user scrolls, it will snap it to the next section. Scrollify is good about knowing if a section is "long" and will let users scroll normally through longer sections or sections with long paragraphs by using the "overflowScroll" option, which is currently set to "true".

The "scrollSpeed" is a number that you can play around with, the larger the number, the slower the scroll transition. The "easing" setting is set to "jswing" which is the name of the transition and part of the easing library we installed at the top of this code. You can view all of the easing names and swap them interchangeably if you prefer a different transition. You can find the names to swap here. Just use the drop-down menu to test them.

For me, I found that when using the plugin on mobile devices, it wasn't always ideal for mobile users. Most mobile devices already have a "smooth" scroll when they flick up or down, so I disabled the ability for mobile users see the effect by setting "touchScroll" to "false". Scrollify defaults with updating the "hash" for each scrolled section and indexes them automatically based on the number of sections available on a single "page". Each section that a user is currently viewing has an "active" class. This is useful for triggering animations or other functions as they are scroll-snapped into view but you can remove this function by removing these lines:

 before: function() {
        $('.page-section').removeClass('active')
        current = $.scrollify.current();
        current.addClass('active')
      },

As I said, there are many different options and default settings and I encourage you to experiment with them but hopefully this helps you get up and running!

Hope this helps,

-Dan

mrstevejobs · March 15, 2022

I'd recommend using fullPage.js instead.
https://alvarotrigo.com/fullPage/

It a much popular component and it has many more configurable options. The effect is also smoother.

It's a much lighter component as it won't require to load the whole jQuery library.

And the way to use it its also very easy:

<!-- include on the <head>-->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/fullpage.js/dist/fullpage.min.css" />

<!-- include before closing </body>-->
<script type="text/javascript" src="https://unpkg.com/fullpage.js/dist/fullpage.min.js"></script>
<script>
  new fullPage('#fullpage', options);
</script>

fullPage.js is actively maintained, has additional extensions to add features or add new effects and a person who is actually working full time on it.

diaaannna · December 20, 2022

On 5/27/2021 at 8:39 AM, Wolfsilon said:
Hello,

To install this plugin, just make sure that you are using a javascript enabled subscription, I believe that it is available on the Business plan. After you've set up your layout, I would then install the plugin because it will sometimes cause issues with the editor mode and drag-and-dropping blocks. The code I will provide uses several 'Script libraries. The first being, Jquery, a Jquery Easing library, and the Scrollify library.

Start by navigating on your website. Home > Settings > Advanced > Code Injection.

To install the 'Scripts, copy and paste the following in your "Header Code Injection" field:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.21/jquery.scrollify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js" integrity="sha512-0QbL0ph8Tc8g5bLhfVzSqxe9GERORsKhIn1IrpxDAgUsbBGz/V7iSav2zzW325XGd1OMLdL4UiqRJj702IeqnQ==" crossorigin="anonymous"></script>
Immediately following those links, you'll begin setting up the functions, events, and features for Scrollify. Copy and paste the following code:
<script>
  $(document).ready(function() {
    $.scrollify({
      section: ".page-section",
      sectionName: ".page-section",
      easing: "jswing",
      scrollSpeed: 800,
      standardScrollElements: ".swiper-wrapper",
      offset: 0,
      overflowScroll: true,
      setHeights: false,
      scrollbars: true,
      touchScroll: false,
       before: function() {
        $('.page-section').removeClass('active')
        current = $.scrollify.current();
        current.addClass('active')
      },
    });
  });
</script>
Here, we're telling Scrollify the objects or sections that should be identified and what the app should do with them. Essentially, we need each ".page-section" to be scroll-snapped into position. If you've taken a look at the Scrollify website, you'll see all of the options and methods that can be applied. You'll also have a better description of what they do. I've included a full code that I've used in the past because it provides a good example for demonstrating the flexibility of Scrollify.

For example: I have a page that uses a "Swiper" carousel for a touch enabled/mouse-wheel scrolling gallery. Scrollify will let me identify this as a "standardScrollElement" and it won't snap to the next section when a user is interacting with that gallery. You can remove this if you have no "micro-interactions" on your website or use it for certain circumstances. Otherwise, when a user scrolls, it will snap it to the next section. Scrollify is good about knowing if a section is "long" and will let users scroll normally through longer sections or sections with long paragraphs by using the "overflowScroll" option, which is currently set to "true".

The "scrollSpeed" is a number that you can play around with, the larger the number, the slower the scroll transition. The "easing" setting is set to "jswing" which is the name of the transition and part of the easing library we installed at the top of this code. You can view all of the easing names and swap them interchangeably if you prefer a different transition. You can find the names to swap here. Just use the drop-down menu to test them.

For me, I found that when using the plugin on mobile devices, it wasn't always ideal for mobile users. Most mobile devices already have a "smooth" scroll when they flick up or down, so I disabled the ability for mobile users see the effect by setting "touchScroll" to "false". Scrollify defaults with updating the "hash" for each scrolled section and indexes them automatically based on the number of sections available on a single "page". Each section that a user is currently viewing has an "active" class. This is useful for triggering animations or other functions as they are scroll-snapped into view but you can remove this function by removing these lines:
 before: function() {
        $('.page-section').removeClass('active')
        current = $.scrollify.current();
        current.addClass('active')
      },
As I said, there are many different options and default settings and I encourage you to experiment with them but hopefully this helps you get up and running!

Hope this helps,

-Dan

Hey @Wolfsilon! Just had a quick question about this. Is there a way to disable this effect in edit mode? It can get kinda annoying to have sections snapping while trying to make updates. Would really appreciate any insight on this. Thanks so much in advance! 😊

Edited December 20, 2022 by diaaannna

ArminB · December 20, 2022

An easy solution for jump links

Here's a demo:
https://www.stonefoxforge.com/groups

(just click the MAKE A REQUEST button)

1) go to DESIGN > CSUTOM CSS and add

html { scroll-behavior: smooth;}

go back to your page

2) use #start as the link e.g. on text, images buttons etc... (instead of /contact for example)

3) add a code block somewhere on your page
and add

<p id="start"></p>

then you'll jump down to this certain code block (PS: make sure to align the position on mobile as well

PS: you can have multiple jump links by just using different terms #yourterm

I hope this is helpful

Edited December 20, 2022 by ArminB

Wolfsilon · December 21, 2022

@diaaannna You could just disable the code before editing. The additional steps to take to have it recognize you're in 'edit mode' would be way more difficult than just commenting the script out.

Resonate · March 7, 2023

Apologies to jump onto this thread, but is there any way this can be used on a 7.0 Brine template?

I've not been able to find a solution so far!

Thanks,

Darren

agwoodesigns · February 6

Hi does anyone know how i can get this code to work on my site? I also use the plugin Squarekicker for scrolling effects so idk if thats why mine doesn't work.

Any assistance would be greatly appreciated.

biosysco.squarespace.com

pw: biosysco1

sorca_marian · March 27

I just created a very simple code for scrolling to certain sections on Squarespace 7.1

Source code: https://github.com/sorcamarian/squarespace-tricks/blob/main/Functionality/Scroll to section/page-header-code-injection.html

Tutorial video

How do I create a smooth scrolling website that jumps to sections?

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Wolfsilon

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources