FullPage.js Skip Sections
FullPage.js Skip Sections
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css">
<script src="https://cdn.rawgit.com/Baro82/fp/master/jquery.fullpage.js"></script>
<div id="menu">
<a href="#page1">page1</a>
<a href="#page2">page2</a>
<a href="#page3">page3</a>
<a href="#page4">page4</a>
<span></span>
</div>
<div id="fullpage">
<div style="background-color:#ff7f7f;" class="section" data-anchor="page1">
<h1>1</h1>
</div>
<div style="background-color:#ff7fdf;" class="section" data-anchor="page2">
<h1>2</h1>
</div>
<div style="background-color:#a67fff;" class="section" data-anchor="page3">
<h1>3</h1>
</div>
<div style="background-color:#7fafff;" class="section" data-anchor="page4">
<h1>4</h1>
</div>
</div>
CSS
html,
body {
background-color: #e0e0e0;
font-family: verdana;
font-size: 20px;
text-align: center;
}
#menu {
position: fixed;
top: 20px;
width: 100%;
z-index: 9999;
}
#menu span {
display: inline-block;
width: 100%;
margin-top: 10px;
font-size: 0.8em;
color: #fff;
}
#menu a {
margin: 0px 20px;
font-weight: bold;
color: #777;
text-decoration: none;
}
#menu a:hover {
color: #bed663;
}
#menu a.selected {
color: #bed663 !important;
}
h6 {
color: #fff;
}
JavaScript
/*
FullPage.js with an hack in these 2 lines
***************************************************************************************************************
***************************************************************************************************************
*
* Moves the page up one section.
*
function moveSectionUp(){
var prev = $(SECTION_ACTIVE_SEL).prevAll(SECTION_SEL + ':first'); // <--- THIS
// var prev = $(SECTION_ACTIVE_SEL).prev(SECTION_SEL); // <--- INSTEAD OF THIS
AND
*
* Moves the page down one section.
*
function moveSectionDown(){
var next = $(SECTION_ACTIVE_SEL).nextAll(SECTION_SEL + ':first'); // <--- THIS
//var next = $(SECTION_ACTIVE_SEL).next(SECTION_SEL); // <--- INSTEAD OF THIS
*/
/*
My code
***************************************************************************************************************
***************************************************************************************************************
*/
/*
THE MAIN CODE
***************************************************************************************************************
***************************************************************************************************************
*/
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['page1', 'page2', 'page3', 'page4'],
afterLoad: function(anchorLink, index) {
// Get the real index with hidden section, oterwise index is relative to the visibile sections.
var realIndex = fpGetRealIndex(index);
// LOG
$('#menu span').html('index: ' + index + ' / realIndex: ' + realIndex);
fpSkipEl([], -1, -1);
}
});
fpInitSkipEl(function(index, nextIndex) { // Fire on anchor Click
if (index == 1 && nextIndex == 4) {
fpSkipEl(['page2', 'page3'], index,...