Fullpage.js: Scroll to Top of Section/Slide on Click

Created on 14 Jul 2016 · 7Comments · Source: alvarotrigo/fullPage.js

Description

In another site I have a fixed menu with anchored links to sections, when you click on these links it scrolls to the spot where you left off in that section/slide. I'm trying to make it so when you click on it, it scrolls to the top of the section/slide instead or reset the anchor position. See link below for a similar reproduced example.

Link

http://jsfiddle.net/gxkf47ce/

Steps to reproduce it

Click on the anchored link on top
Scroll in the middle-ish
Click on arrows to go somewhere else
Click again on the anchored link (goes back to the same spot, ideally it should go on top of the div)

Versions

Chrome v51 Mac

question

Source

accurate

Most helpful comment

You can extract the iscroll instance for each section / slide by doing this:

//suppossing you have no slides in the section
var scrollable = $('.fp-section').find('.fp-scrollable'); 

var iScrollInstance = scrollable .data('iscrollInstance');

If you have slides then you would have to iterate through the slides and find the one you want to extract the iscroll instance.

alvarotrigo on 15 Jul 2016

👍2 🎉1

All 7 comments

It behaves as any other element with the CSS property overflow:scroll would do.

Because fullpage.js uses a fork of iScroll.js you can take a look at its documentation and find a way to apply it in a fullpage.js callback such as afterSlideLoad or onSlideLeave.

I don't believe fullpage.js should change that behaviour.

alvarotrigo on 14 Jul 2016

👍1

I have a feeling I'm almost there, but I wanted to check with you to see if there is a function I can use to call iscroll on leave or if I have to do a new call, do I make it on the fp-scrollable div? In your code I found "iScrollInstance", can I use that somehow?

onLeave: function(index, nextIndex, direction){ var section_id = "#"+jQuery(".section")[nextIndex-1].id; myScroll = new IScroll(section_id+" .fp-scrollable"); myScroll.scrollTo(0,0); }

Thanks for your help!

Update: found a way to fix it by cheating and changing the CSS "transform: (0,0,0);" to the divs .fp-scoller and .iScrollIndicator which seems to do the job

accurate on 15 Jul 2016

You can extract the iscroll instance for each section / slide by doing this:

//suppossing you have no slides in the section
var scrollable = $('.fp-section').find('.fp-scrollable'); 

var iScrollInstance = scrollable .data('iscrollInstance');

If you have slides then you would have to iterate through the slides and find the one you want to extract the iscroll instance.

alvarotrigo on 15 Jul 2016

👍2 🎉1

Awesome! That worked perfectly and thank you for the amazing support :)

accurate on 18 Jul 2016

Hey thanks much for this guys - is it possible to see a working example of this? a bit stuck right now