FullPage.js Skip Sections

by StepBaro

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="#page4">page4</a>
    <a href="#page5">page5</a>
</div>
<div id="fullpage">
    <div style="background-color:#ff7f7f;" class="section" data-anchor="page1">
        <h1>1</h1>
        <a href="#page2">page2</a>
        <a href="#page3">page3</a>
        <a href="#page6">page6</a>
    </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 style="background-color:#7fcdff;" class="section" data-anchor="page5">
        <h1>5</h1>
    </div>
    <div style="background-color:#c1ff7f;" class="section" data-anchor="page6">
        <h1>6</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 a {
    margin: 0px 20px;
    font-weight: bold;
    color: #777;
    text-decoration: none;
}

#menu a:hover {
    color: #bed663;
}

#menu a.selected {
    color: #bed663 !important;
}

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
	***************************************************************************************************************
	***************************************************************************************************************
*/
$.fn.fullpage.initSkipEl = function() {
	
    if ($.isFunction($.fn.fullpage.funcSkipEl)) {
        var nextIndex = 0;
        $('.section').each(function() {
            nextIndex++;
            $('a[href="#' + $(this).attr('data-anchor') + '"]').on('click', function() {
                var dataAnchor = $(this).attr('href').toString().replace('#', '');
                return $.fn.fullpage.funcSkipEl($('.section').index($('.section.active')) + 1, $('.section').index($('.section[data-anchor="' + dataAnchor + '"]')) + 1);
            });
        });
    }

}

$.fn.fullpage.skipEl = function(anchorsToSkip, index, nextIndex) {

    $('.section').each(function() {
        if (anchorsToSkip.indexOf($(this).attr('data-anchor')) > -1 && $(this).attr('data-anchor') != $('.section').eq(index - 1).attr('data-anchor') && $(this).attr('data-anchor') != $('.section').eq(nextIndex - 1).attr('data-anchor')) {
 ...