Implement distinct, "sticky" sections on single page for scrolling (i.e. one scroll motion brings you to entirely new view on same page)

Site URL: https://erickanigan.photography/portfolio-3

Hi all-

I'm trying to figure out how to change the scrolling on a single desired home page so that one scroll would change your view to a new "chunk" or section of the same page. I have included my page URL, but this site has the type of motion I'm thinking of (https://davidyarrow.photography) where initially your view is one section, if you scroll down even a bit it provides an entirely new view in distinct sections.

Any help would be appreciated!

Eric

Hello,

The example you shared and your description sounds like an "auto-scroll" or "scroll-snap" feature. You will need a Squarespace subscription that has Javascript enabled. If you have a plan that supports Code Injection.

Navigate to Settings > Advanced > Code Injection.

Copy and paste the following into the 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>

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

I would encourage you to explore the "Scrollify" website and experiment with different features, speeds, easings, and options. You'll also be able to understand how to control where and when the auto-scrolling should take place. The setup I've provided a bit advanced, but should get you up and running in no time.

Hope this helps,

-Dan

On 6/4/2021 at 3:57 PM, Wolfsilon said:

Hello,

The example you shared and your description sounds like an "auto-scroll" or "scroll-snap" feature. You will need a Squarespace subscription that has Javascript enabled. If you have a plan that supports Code Injection.

Navigate to Settings > Advanced > Code Injection.

Copy and paste the following into the 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>

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

I would encourage you to explore the "Scrollify" website and experiment with different features, speeds, easings, and options. You'll also be able to understand how to control where and when the auto-scrolling should take place. The setup I've provided a bit advanced, but should get you up and running in no time.

 

Hope this helps,

-Dan

Hey Dan- this was great and seems to be working. Is there a part of the CSS that can be modified so the scroll snap/auto-scroll only is applied for a portion of a page. The problem I'm running into is that my home page (https://erickanigan.photography/#1) is technically a portfolio page. This means that if I follow the links to one of the collections of photos (example: https://erickanigan.photography/home/landscape#1), the snap scroll is applied here too which I do not want.