Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Zenia

Question

Posted (edited)

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 by Zenia
Link to comment
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

3 answers to this question

Recommended Posts

  • 0

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

Link to comment
  • 0
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,

Link to comment
  • 0

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

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...