Setting up snap-scrolling to homepage sections

Site URL: https://www.strongcommunitiesfund.org

Hello! I have very little coding knowledge, but my client has asked that I set up snap-scrolling for the homepage sections similar to the homepage of this site: https://forterra.org/

My theme doesn't have indexes, but I understand there is a way to set this up with CSS. Hoping someone can help me out with the code needed/ specific instructions for setting it up so that I can snap scroll to specific sections of the page. 

Site password is: December2020

Thanks!

No. You can't do this with CSS.

You need script code (Business Plan or higher) to do it.

Hi @tuanphan I want to have the snap scroll effect to this sample website.

 (like on this website: https://www.evergrande.com.au/) to my squarespace website: https://www.truesite.io/

Let me know if you can help.

Thanks alot

Scrollify is clean and simple to setup on your website. Setting -> Advanced -> Code Injection. Be sure to include tags for JQuery. 

Add it to the Footer. Sometimes the Head injection won't work. 

Scrollify?

Does anyone have a full code tutorial for how to insert jQuery into the advanced settings? 

I found a link to a tutorial with some code but I have no idea how to implement. Hope someone can help me out? https://projects.lukehaas.me/scrollify/#home

Thanks and kind regards

René

6 hours ago, Winther said:

Scrollify?

Does anyone have a full code tutorial for how to insert jQuery into the advanced settings? 

I found a link to a tutorial with some code but I have no idea how to implement. Hope someone can help me out? https://projects.lukehaas.me/scrollify/#home

 

Thanks and kind regards

René

<script src="https://cdnjs.cloudflare.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>
$(document).ready(function() {
          $.scrollify({
            	section : ".page-section",
          });
});
</script>

@bangank36 How would I go about having this script only targeting my home page? 

My Site is lukaseriksen.com

On 4/6/2021 at 3:07 PM, LukasEriksen said:

@bangank36 How would I go about having this script only targeting my home page? 

My Site is lukaseriksen.com

Hover homepage on Main Navigation or Not Linked >> CLick gear icon to opan Page Header > Advanced > Paste the code

<script src="https://cdnjs.cloudflare.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>
$(document).ready(function() {
          $.scrollify({
            	section : ".page-section",
          });
});
</script>

On 4/12/2021 at 7:25 AM, tuanphan said:

Hover homepage on Main Navigation or Not Linked >> CLick gear icon to opan Page Header > Advanced > Paste the code

<script src="https://cdnjs.cloudflare.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>
$(document).ready(function() {
          $.scrollify({
            	section : ".page-section",
          });
});
</script>

 

Thanks for the reply! I've tried doing this, but it seemingly does nothing. When i put the code in the code injection footer area it works however, just not only on my homepage.

My site url is lukaseriksen.com