Streaming live at 10am (PST)

Page Scroll - Snap to Section Top


#1

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 ‘https://alvarotrigo.com/fullPage/’ 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)


#2

Check out this project

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.


#3

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


#4

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.


#5

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.


#6

Check this out


#7

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


#8

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


#9

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

Regards.

Darren