Fullpage.js: When scrolling through slides, how to always start from the top of the content?

[AmanSahota]

If I have four slides for example, on of them I have scrolled down half way. When I return to that slide it is still half the way down. Is it possible to always start the slides at the top? I do not want the slide to remain when the user had scrolled down to.

[alvarotrigo]

I assume you are talking about using the option scrollOverflow:true.

You can use the extension ScrollOverflow Reset for that matter. Just purchase it and follow the docs regarding how to use fullPage.js extensions

[AmanSahota]

Yes this is regarding scrolloverflow: true.

As you can see in the example I have scrolled down. However, everytime I come back to this slide the scrollbar is at the bottom. I would like it to reset to the top as soon as I leave. Is this possible?

The demo page doesn't seem to work in this way.

[alvarotrigo]

As i said:

You can use the extension ScrollOverflow Reset for that matter. Just purchase it and follow the docs regarding how to use fullPage.js extensions

[AmanSahota]

Hi @alvarotrigo there we have purchased the plugin. However, I need to know if this is correct? It does not seem to be working.

<script type="text/javascript">
$(document).ready(function() {
            $('#fullpage').fullpage({
                anchors: ['firstSection', 'personaSection'],
                sectionsColor: ['black', 'black'],
                controlArrows: false,
                scrollOverflow: true
            });
            new fullPage('#fullpage', {
                scrollOverflowReset: true,
                scrollOverflowResetKey: 'XYZ'
            });
        });
</script>

At the bottom I have added:

<script type="text/javascript" src="js/fullpage.scrollOverflowReset.min.js"></script>
<script type="text/javascript" src="js/fullpage.extensions.min.js"></script>

[alvarotrigo]

Not correct.

Use only one initialisation.

            new fullPage('#fullpage', {
                anchors: ['firstSection', 'personaSection'],
                sectionsColor: ['black', 'black'],
                controlArrows: false,
                scrollOverflow: true
                    scrollOverflowReset: true,
                    scrollOverflowResetKey: 'XYZ'
            });

[AmanSahota]

Hey @alvarotrigo thanks for the quick reply. My whole site stops working when I do this?

I have changed:

$('#fullpage').fullpage({
                anchors: ['firstSection', 'personaSection'],
                sectionsColor: ['black', 'black'],
                controlArrows: false,
                scrollOverflow: true
            });

to this:

$(document).ready(function() {
            new fullPage('#fullpage', {
                anchors: ['firstSection', 'personaSection'],
                sectionsColor: ['black', 'black'],
                controlArrows: false,
                scrollOverflow: true,
                   scrollOverflowReset: true,
                   scrollOverflowResetKey: 'MY KEY'
            });
        });

Anything else that I should be doing?

[alvarotrigo]

Make sure you are using the latest fullpage.js version 3.
Also, better if you just place the code after including fullpage.js, as it is in in all the examples in this repository:

<script type="text/javascript" src="js/fullpage.scrollOverflowReset.min.js"></script>
<script type="text/javascript" src="js/fullpage.extensions.min.js"></script>
<script>
new fullPage('#fullpage', {
                anchors: ['firstSection', 'personaSection'],
                sectionsColor: ['black', 'black'],
                controlArrows: false,
                scrollOverflow: true,
                   scrollOverflowReset: true,
                   scrollOverflowResetKey: 'MY KEY'
            });
</script>

[AmanSahota]

Do I still need to include "jquery.fullPage.js" too?

[alvarotrigo]

No. Just look at the the fullpage.js documentation. You'll find there all you need to know about fullPage.js usage. And you won't see there anything at all about jquery.fullPage.js

[AmanSahota]

Hi, apologies.

I have just checked everything, and it sits as follows just before the tag:

<script type="text/javascript" src="js/fullpage.scrollOverflowReset.min.js"></script>
<script type="text/javascript" src="js/fullpage.extensions.min.js"></script>
<script type="text/javascript" src="js/fullpage.js"></script>
<script type="text/javascript" src="js/scrolloverflow.min.js"></script>

<script>
        $(document).ready(function() {
            new fullPage('#fullpage', {
                anchors: ['firstSection', 'personaSection'],
                sectionsColor: ['black', 'black'],
                controlArrows: false,
                scrollOverflow: true,
                scrollOverflowReset: true,
                scrollOverflowResetKey: 'XXX'
            });
        });

        // Go directly to persona via menu
        $(document).on('click', '#matt', function(){
          fullpage_api.silentMoveTo('personaSection', 0);
        });
        $(document).on('click', '#ricciardo', function(){
          fullpage_api.silentMoveTo('personaSection', 1);
        });
        $(document).on('click', '#henrik', function(){
          fullpage_api.silentMoveTo('personaSection', 2);
        });
        $(document).on('click', '#gregory', function(){
          fullpage_api.silentMoveTo('personaSection', 3);
        });
</script>

I am using fullPage 3.0.3. As soon as I add the new new fullPage('#fullpage' code it breaks and the section colours disappear.

Previous code works as expected:

$('#fullpage').fullpage({
 anchors: ['firstSection', 'personaSection'],
 sectionsColor: ['black', 'black'],
 controlArrows: false,
 scrollOverflow: true
});

[alvarotrigo]

Please read the instructions regarding how to use extensions in the the fullpage.js documentation.

This is wrong;:

<script type="text/javascript" src="js/fullpage.scrollOverflowReset.min.js"></script>
<script type="text/javascript" src="js/fullpage.extensions.min.js"></script>
<script type="text/javascript" src="js/fullpage.js"></script>
<script type="text/javascript" src="js/scrolloverflow.min.js"></script>

[AmanSahota]

@alvarotrigo I have got all this working, however the extension is not resetting the content to the top?

<script type="text/javascript" src="js/scrolloverflow.min.js"></script>
<script type="text/javascript" src="js/fullpage.scrollOverflowReset.min.js"></script>
<script type="text/javascript" src="js/fullpage.extensions.min.js"></script>

<script type="text/javascript">
    new fullpage('#fullpage', {
        anchors: ['firstSection', 'personaSection'],
        sectionsColor: ['black', 'black'],
        // Activates original scrollbar
        controlArrows: false,
        scrollOverflow: true,
        scrollOverflowReset: true,
        scrollOverflowResetKey: ''
    });
</script>

I have scrollOverflowReset: true. I this enough to make it reset? I can provide the url if that helps? Any help would be great.

[olsp]

@AmanSahota could you solve this? I may have the same problem ...

[AmanSahota]

Yes. You will need the extension for this to work though:

afterSlideLoad: function(section, origin, destination, direction){
    fullpage_api.scrollOverflowReset.setPrevious(section.item);
    fullpage_api.scrollOverflowReset.reset();
}

[olsp]

Great, that works. Thank you!

[AmanSahota]

@alvarotrigo could we maybe have this as a feature request? Have it included as an option.. this maybe useful for some others too.

[alvarotrigo]

@AmanSahota more like a extension feature :)
I'll definitely consider adding it in the scrollOverflowReset extension!