Page Scroll - Snap to Section Top

Hi Guys,

Please take a look at my read only site: https://preview.webflow.com/preview/blackbrook-asset-management?preview=b1eabc7694f79eae67c5b02c259d2720

I would like the site to snap to each section when user scrolls. I have searched and continue to come across ‘fullPage.js | One Page Scroll sections Site Plugin’ but struggling to implement to the site.

Any help here would be greatly appreciated, especially as the hero area of my site would rely on this otherwise users will scroll past content.

Looking forward to any fixes.

Regards

Darren


Here is my site Read-Only: https://preview.webflow.com/preview/blackbrook-asset-management?preview=b1eabc7694f79eae67c5b02c259d2720
(how to share your site Read-Only link)

Check out this project

https://webflow.com/website/typed-js?s=typed-js#

It has implemented Type.js and fullpage.js which you can clone and start from there or copy the code and paste it into your project.

1 Like

Thanks for the reply Aaron. Unfortunately the Fullpage.js code is in the project settings custom code and the only way to access that is to clone the project and add hosting?

Any other ideas how to grab it?

Cracking project BTW.

Thanks

You don’t need to add hosting to the project to access the code, you can just go to the Custom code section and copy it from there.

Thats what I tried, and there is custom code within the designer side however the fullpage.js code is in the project side (see screen grab attached).

Unless I am missing a trick, I cannot access without adding hosting.

Check this out

http://cloud.ipagroup.co/qL6I

Thanks Aaron.

I think as my account is on ‘starter’ and I have individual hosting for each of my projects I cannot access the custom code in the project settings.

Would it be possible for you to copy and paste the code into this feed?

Many thanks, appreciate your help.

Darren

Oh I see!

Here you go:

Head code:

<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script type="text/javascript" src="/js/jquery.fullPage.js"></script>

Before body code:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.1/jquery.fullPage.js"></script>
<script>
    $(document)
        .ready(function () {
            $('#fullpage')
                .fullpage({
                    
              anchors: ['p1', 'p2', 'p3', 'p4', 'p5'],
              menu: '#menu',
              responsiveWidth: 720,
              scrollingSpeed: 850,
              
              //Scrolling
              css3: true,
              autoScrolling: true,
              fitToSection: false,
              fitToSectionDelay: false,
              scrollBar: true,
              easing: 'easeInOutCubic',
              easingcss3: 'ease',
              animateAnchor: true,
              loopBottom: true,
              loopTop: false,
              loopHorizontal: true,
              continuousVertical: true,
              continuousHorizontal: false,
              scrollHorizontally: false,
              interlockedSlides: false,
              resetSliders: false,
              fadingEffect: true,
              normalScrollElements: '#somesectionsID',
              scrollOverflow: false,
              scrollOverflowOptions: true,
              touchSensitivity: 5,
              normalScrollElementTouchThreshold: 15,
              bigSectionsDestination: null,
              
              /*My additions below this point*/      
           
              showActiveTooltip: true,
           
         
                });
        });
</script>

Hope that helps

1 Like

Many thanks Aaron - I will have a play and see if I can get this working.

Regards.

Darren

2 Likes

Hey, this looks very helpfull, as the project contains multiple smart functions.

However; i experience a small “lag” or “jitter” as i scroll in the page, does anyone else experience this?