Fullpage.js provides you a few methods (see them in action here)
Two of these methods will help you to move to specific sections or slides in your website:
moveTo(section,slide)
(codepen example) scrolls the page to the given section and slidesilentMoveTo(section,slide)
(codepen example) like the previous one, but it performs the scroll without animation
You can set one of this method to a button or use the fullpage.js callbacks to fire it when you desire.
In order to skip sections we can use the moveTo
method in the onLeave
callback. Here's a codepen.
And here's the relevant code:
new fullpage('#fullpage', {
sectionsColor: ['yellow', 'green', 'purple', 'orange'],
//events
onLeave: function(origin, destination, direction) {
skipPages(origin, destination, direction)
}
});
function skipPages(origin, destination, direction){
if(destination.item.classList.contains('skip')){
if(direction === 'down'){
destinationIndex = destination.index + 2;
}else{
destinationIndex = destination.index;
}
console.log(destinationIndex);
setTimeout(function(){
fullpage_api.moveTo(destinationIndex);
});
}
}
In order to make it work for us we would have to add the class name skip
on the sections that we want to skip.
For example:
<div id="fullpage">
<div class="section">Section 1 </div>
<div class="section skip">Section 2 </div>
<div class="section">Section 3 </div>
</div>
You might also find these articles relevant: