Streaming live at 10am (PST)

Rookie looking for JS integration help! [Next and Previous anchor scrolling buttons]


#1

Hi everybody

This is my first time posting here but have been lurking for the past few weeks while I’m learning all about the sheer awesomeness of Webflow!

I’ve decided for my website I’d like to have some ‘Next’ and ‘Previous’ buttons hovering in the bottom right corner. The page is a single page with anchor points so I feel it would be a nice little way of navigating the site without having to open and close the main menu.

I’ve spent a long time reading about integrating JS and I think I’m mostly there but I just cannot get it work and could really use a hand.

I managed to find a Stack Overflow topic that does exactly what I want. I had some good luck using interactions to show and hide buttons on scroll but that fell down on the ‘scroll out of view’ interaction hence why I’m attemping this.

Here’s the topic I found showing what I would like to do:

Here is the poster’s link to this working:
http://jsfiddle.net/shlomohassid/6r1h687k/

Here is a screenshot of what I’ve got so far:

If that’s hard for anyone to see; I’ve set the button’s class as ‘next’ and the div ID as ‘arrow a’ although I’ve tried multiple combinations of this and can’t get it to work, even in the published page.

Here’s the custom code I’m using:

<script>
$(function(){
    
    var pagePositon = 0,
        sectionsSeclector = 'section',
        $scrollItems = $(sectionsSeclector),
        offsetTolorence = 30,
        pageMaxPosition = $scrollItems.length - 1;
    
    //Map the sections:
    $scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); });

    // Bind to scroll
    $(window).bind('scroll',upPos);
    
    //Move on click:
    $('#arrow a').click(function(e){
        if ($(this).hasClass('next') && pagePositon+1 <= pageMaxPosition) {
            pagePositon++;
            $('html, body').stop().animate({ 
                  scrollTop: $scrollItems.eq(pagePositon).offset().top
            }, 300);
        }
        if ($(this).hasClass('previous') && pagePositon-1 >= 0) {
            pagePositon--;
            $('html, body').stop().animate({ 
                  scrollTop: $scrollItems.eq(pagePositon).offset().top
              }, 300);
            return false;
        }
    });
    
    //Update position func:
    function upPos(){
       var fromTop = $(this).scrollTop();
       var $cur = null;
        $scrollItems.each(function(index,ele){
            if ($(ele).offset().top < fromTop + offsetTolorence) $cur = $(ele);
        });
       if ($cur != null && pagePositon != $cur.data('pos')) {
           pagePositon = $cur.data('pos');
       }                   
    }
    
});
</script>

Any help anyone could give would be immensely appreciated

Thanks and best wishes

Jon


#2

See this topic https://forum.webflow.com/t/fullpage-js-scroll-effect/1643?u=samliew

“moveSectionUp”, “moveSectionDown” https://alvarotrigo.com/fullPage/examples/methods.html