Fullpage.js: Don't want to scroll to the bottom of a section

[NiklasLazinbee]

Hallo,
for mobile divices with small screens I set $.fn.fullpage.setAutoScrolling(false).
I have sections in which the height is more than screenheight, when I use the menu to skip to a section, fullPage.js animates to the bottom of these section. But I want to go to the top of the section. I don't want to use $.fn.fullpage.setFitToSection(true) because than I at first go to the bottom and than the script jumps to the top of the section.

Is there a way that fullPage.js animates to the top of a section and not to the bottom?

Best regards
Niklas

[alvarotrigo]

Is there a way that fullPage.js animates to the top of a section and not to the bottom?

fullPage.js will animate to the top if you come from a section above the destination one.
It will animate to the bottom if you come from a section below the destination one.

Make sure you use the latest fullpage.js (2.7.8) to get this result.

[NiklasLazinbee]

I find a solution which works for me, but I don't fi it works for everyone because I don't know all dependencies:
I change line 1294 from
if(element.outerHeight() > windowsHeight){
to
if(element.outerHeight() > windowsHeight && options.autoScrolling){
and line 1302 from
else if(isScrollingDown){
to
else if(isScrollingDown && options.autoScrolling){

Beste regards
Nikls

[pierrz]

Hi,

I'm in the same case despite using the 2.7.8 version.

This fix works for me, thanks !

[dceonline]

Hi,

that works for me too. Maybe you can add an option like 'scrollToSectionTop' true|false, to always scroll to the top off a section. That would be a nice feature if autoscrolling is disabled and someone uses the navbar.

Regards
Ortwin

[codercooooder]

I too wished that fullpage had this option. Alvaro pointed me to this page after I posting a similar issue on stackOverflow: http://stackoverflow.com/questions/36043917/forcing-fullpage-js-to-scroll-to-the-top-of-long-sections-when-scrolling-from-th?noredirect=1#comment59764246_36043917

I tried the fix suggested by NiklasLazinbee, but sure if I implemented it correctly. It didn't do what I had hoped. As I see it. this fix requires you turn off autoScrolling? It ok because it preserves the menu functionality, but for me I lose all scrolling animation (which I'd like to retain). I would love it if someone could come up with a fix that would allow me to keep autoscrolling on and at the same time scroll directly to the top of the preceding section when scrolling up. I could also just be doing something wrong. I uploaded my version of the fullpage.js with the suggseted fixes here if anyone wants to see if there is something wrong with it: https://github.com/codercooooder/fullpageScrollFixes/blob/master/jquery.niklasFullPageFix.js

[Klasyczny]

Hello,
while solution provided in 2.7.8 and proposed here by Niklas works fine on a computer or google emulated devices, it doesnt work on mobile devices. There, skipping to section still jumps to bottom instead of top of it. I hope this isn't the impassable problem and can be handled.

Regards,
Klasyczny

[alvarotrigo]

There, skipping to section still jumps to bottom instead of top of it. I hope this isn't the impassable problem and can be handled.

I'm afraid I'm not able to reproduce your issue. It works as expected for me.
Provide an isolated reproduction if you think its not working as I said previously:

fullPage.js will animate to the top if you come from a section above the destination one.
It will animate to the bottom if you come from a section below the destination one.

[ghost]

fullPage.js will animate to the top if you come from a section above the destination one.
It will animate to the bottom if you come from a section below the destination one

From a user point of view i would expect animate to top if coming from a section below the destination one. the thing is that the same link navigates me to two different positions. so if i want to go again to beginning of the previous section (like it worked before from above) I get a different behaviour now.

An option for this would be really cool therefore. imho the same link should always lead to same position. in this case top of section.

[ghost]

@NiklasLazinbee Your solution works great so far. Thx!

[pfried]

I am using fullpage on a responsive site am doing and it would be very helpful to be able to scroll to the top. If the viewport is very small it is hard for users to know where they are if there is no headline. On desktop this is totally fine since there are enough fixpoints. But on a mobile device it is crucial to scroll to the top of the section as there will be a headline or any other entry point

Addition: I am using the responsiveWidth property, so it is a normal scrolling site at that point with a drop-down navigation on the top.

[codercooooder]

Indeed, it would really be wonderful if fullpage could autoscroll not only to the top of sections from below with gesture, but also with keyboard control.

Actually, I discovered that this is why I thought the solution devised by @NiklasLazinbee didn't seem to work for me. I didn't realize there was a difference between keyboard-controlled scrolling and gesture controlled autoscrolling. His fix does work for gesture scrolling, but it doesn't seem to change the section target reference to top for keyboard scrolling from below.

[bdkaat]

I also need a solution for this. I never want a section to scroll to the bottom.

[sohrabzia]

I got your point, I have section bigger then the view port height, when i navigate to that section it goes to top of that section but after a moment it automatically scrolls to bottom of same section. which is not enough time to see what is at the top of section as it scrolls up automatically.

[alvarotrigo]

@sohrabzia That's probably because you are using fitToSection:true. Just turn it off.

[sohrabzia]

Thank you so much @alvarotrigo , that is a relief. Thanks again :)

[Dimidel]

Hi, same problem for me.
I usually set section's height to auto to allow higher sections and i don't want the menu to scroll to the bottom of them even if if you come from a section below the destination one.
An option to set this would be really appreciable.
Waiting for this, i have to use an old version of your plugin (2.6) which don't implement this feature.
Thanks in advance.

[CodeDredd]

@Saradimi I made a gist with that option.
fullPage.js with new Option

[alvarotrigo]

Fixed in fullpage.js 2.8.2.
A new option was added bigSectionsDestination. Check the docs for more info about its usage.

[SweetyBrittany]

I meet the same problem with sohrabzia. I have spend about 5 hours on it. If the problem is not solved, i will work night shift. Fortunately the answer of setting fitToSection: false works for me. I am really grateful now. @alvarotrigo @sohrabzia

[JerryGreen]

I want this feature not for only big sections 😞

For my case, the section is smaller than viewport and I want that my scroll is always stick to the bottom of section, whether I scroll down or up.

A bit more clarification:

Not that necessary to stick to exactly bottom, top is ok too - It's not that important. The important thing here - it should work simplier, less smart and not checking the direction of scroll.

UPD.

For me this fix was to change this:

            if(element.outerHeight() > windowsHeight){
                //scrolling up?
                if(!isScrollingDown && !bigSectionsDestination || bigSectionsDestination === 'bottom' ){
                    position = sectionBottom;
                }
            }

to this:

            if(element.outerHeight()){
                position = sectionBottom;
            }

Exactly what I need.

[codemilli]

I think adding new option like sectionsDestination set to 'auto' as default

and change below lines of code

else if(isScrollingDown || (isResizing && element.is(':last-child')) ){
  //The bottom of the destination will be at the bottom of the viewport
  position = sectionBottom;
}

to

...

var sectionsDestination = options.sectionsDestination;

...

else if(sectionsDestination !== 'top' && (isScrollingDown || (isResizing && element.is(':last-child'))) ){
  //The bottom of the destination will be at the bottom of the viewport
  position = sectionBottom;
}

always scroll to top of section when user set the value sectionsDestination as 'top' could fix this issue.

@alvarotrigo Could you give me your opinion ?
If you think this is a proper enhancement, I can make PR.

[vdomah]

@hckrmoon thanks! that's exactly what I've searched. Allowed to scroll only to top of sections even for smaller.

But there is problem when viewport reaches the bottom of page: empty space appears under the last section because viewport starts from it's top. To fix this I enhanced your approach to set viewport's bottom to last section bottom if we got empty space. Here is whole getDestinationPosition function:

function getDestinationPosition(element){
------------------------------- added ------------------------------------
        var sectionsDestination = options.sectionsDestination;

        // if window bottom is lower then last section bottom position - show the last section with bottom destination
        var heightTillEnd = 0;
        for (var i=element.index(); i < $(options.sectionSelector).length; i++) {
            heightTillEnd += $(options.sectionSelector).eq(i).outerHeight();
        }
        if (heightTillEnd < windowsHeight) {
            element = $('.section:last-child');
            sectionsDestination = 'bottom';
        }
------------------------------- END added ------------------------------------
        var elemPosition = element.position();

        //top of the desination will be at the top of the viewport
        var position = elemPosition.top;
        var isScrollingDown =  elemPosition.top > previousDestTop;
        var sectionBottom = position - windowsHeight + element.outerHeight();
        var bigSectionsDestination = options.bigSectionsDestination;

        //is the destination element bigger than the viewport?
        if(element.outerHeight() > windowsHeight){
            //scrolling up?
            if(!isScrollingDown && !bigSectionsDestination || bigSectionsDestination === 'bottom' ){
                position = sectionBottom;
            }
        }

        //sections equal or smaller than the viewport height && scrolling down? ||  is resizing and its in the last section
        else if(sectionsDestination !== 'top' && (isScrollingDown || (isResizing && element.is(':last-child'))) ){
            //The bottom of the destination will be at the bottom of the viewport
            position = sectionBottom;
        }

        /*
        Keeping record of the last scrolled position to determine the scrolling direction.
        No conventional methods can be used as the scroll bar might not be present
        AND the section might not be active if it is auto-height and didnt reach the middle
        of the viewport.
        */
        previousDestTop = position;
        return position;
    }

[tylerjordan1994]

@hckrmoon perfect!! Thanks so much! Why isn't this a feature?

[TylerBarnes]

@alvarotrigo was any more thought given to this? @hckrmoon's fix looks good but I can't use it since I'm using react-fullpage installed from npm.

[alvarotrigo]

@TylerBarnes nothing new.