javascriptjqueryfullpage.js

FullpageJS plugin - window.scrollTo manage


Im using https://alvarotrigo.com/fullPage/docs/ plugin (jQuery version)

I have four vertical section and showing one by one in html but there is lengthy content In third section and I have to adjust scroll ( Window.scrollTo() ) based on offseTop of listed item click

  Window.scrollTo() is not working so Im trying to do with this solution but I am not getting the accurate calculation , it seems its not a right solution** 
    
     let elem = document.querySelector(".active");
            $('.active-section .fp-scroller').css({'transform': `translate(0, -${elem.offsetTop}px)`});
            $('.active-section .iScrollIndicator').css({'transform': `translate(0, ${ $('.active-section').height() - elem.offsetTop }px)`});

==========================================

<div class="wrapper">
   <section class="section one"> One </section>
   <section class="section two"> two </section>
   <section class="section three"> three - (here there is listing <li> </li>...  )</section>
   <section class="section four"> four </section>
</div>

$('li').click( function(){
    let ind = $('.animate-section.active').index();
    $.fn.fullpage.reBuild();
    $.fn.fullpage.silentMoveTo(ind + 1);

    $('li').removeClass('active');
    $(this).addClass('active');

    let elem = document.querySelector(".active");
    $('.active-section .fp-scroller').css({'transform': `translate(0, -${elem.offsetTop}px)`});
    $('.active-section .iScrollIndicator').css({'transform': `translate(0, ${ $('.active-section').height() - elem.offsetTop }px)`});
 });

$('.wrapper').fullpage({
        sectionSelector: '.section',
        navigation: false,
        normalScrollElements:,
        scrollOverflow: true,
        onLeave: function (origin, destination, direction, trigger) {
            
        },
        afterLoad: function (origin, destination, direction, trigger) {
           
        },
    });

Solution

  • It looks like you are using an old version of fullPage.js. That's gonna be tricky.

    If you update to the latest fullPage.js version 4 it will be way easier. window.scrollTo won't work because it gets applied to the whole window, not to the element you need to scroll.

    If you use fullPage.js v4 you just need to do the following:

    $('.fp-section.active .fp-overflow')[0].scrollTo() 
    

    For example:

    $('.fp-section.active .fp-overflow')[0].scrollTo(0, 500) 
    

    No need to use transform. You can also apply the same for horizontal slides with scrollOverflow.

    Here's a working example: https://codepen.io/alvarotrigo/pen/LYJRPOW?editors=1010