scrolling How to do snap scrolling for Squarespace 7.1

Hey guys,

I want to create a snap scroll effect on my website. I'm using 7.1 - I know Brine works but need to adapt it to 7.1!

Happy to use JS, CSS, etc. Whatever it takes.

Bump!

What snap? Can you post an example site?

Check my code pen stuff for "section snap".

Link in my signature.

3 minutes ago, rwp said:

Check my code pen stuff for "section snap".

Link in my signature.

Thanks Ryan! Does this work for 7.1?

2 hours ago, tuanphan said:

What snap? Can you post an example site?

https://alvarotrigo.com/fullPage/examples/responsive.html#firstPage thanks!

32 minutes ago, bycrawford said:

Thanks Ryan! Does this work for 7.1?

Yes it does.

Though, looking at your example, you are looking for anchor links, which I also have a code for.

On 10/16/2020 at 10:47 PM, rwp said:

Check my code pen stuff for "section snap".

Link in my signature.

Hi Ryan, I cant seem to find the link in your signature - can you put it in a message here? 

18 hours ago, ctd said:

Hi Ryan, I cant seem to find the link in your signature - can you put it in a message here? 

Looking for this as well!

Was this solved? After the same thing....

On 5/13/2021 at 9:46 PM, Jase_studio said:

Was this solved? After the same thing....

No it was never solved. Quite annoying!

Add this to header custom code and make all your sections large on the pages

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>
<script>
        $(function() {
          $.scrollify({
            section : ".page-section",
          });
        });
</script>

On 6/3/2021 at 10:56 AM, slicedcheese said:

Add this to header custom code and make all your sections large on the pages

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>
<script>
        $(function() {
          $.scrollify({
            section : ".page-section",
          });
        });
</script>

Wow - thank you!!

@slicedcheese Is there a way to target just one page?

On 6/3/2021 at 5:56 AM, slicedcheese said:

Add this to header custom code and make all your sections large on the pages

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>
<script>
        $(function() {
          $.scrollify({
            section : ".page-section",
          });
        });
</script>

This worked beautifully!! Thank you!

Hey, I used the code for a specific page, but it also effects the footer, making it a full page if that makes sense? Is there a way I can stop it from affecting the footer?

On 6/9/2024 at 5:48 AM, megancecile91 said:

Hey, I used the code for a specific page, but it also effects the footer, making it a full page if that makes sense? Is there a way I can stop it from affecting the footer?

Try edit this line

   section : ".page-section",

to this

   section : "article .page-section",