Пропускает одну секцию при прокрутке fullPage

Question

Столкнулся с такой проблемой, что при прокрутке колесиком мышки одна секция пропускается: <section class="works section" id="page2". Ещё хотелось бы узнать как сделать прокрутку без изменения url, но думаю тут такой вопрос уже был) Закинул файлы на домен специально, можете здесь очень наглядно увидеть проблему http://me.sssshefer.com/

$(function () {
    $(document).ready(function() {
        $('#fullpage').fullpage({
            //options here
            autoScrolling:true,
            css3: true,
            scrollingSpeed: 1000,
            fitToSection: true,
            fitToSectionDelay: 1000,
            scrollBar: false,
            easing: 'easeInOutCubic',
            easingcss3: 'ease',
            loopBottom: false,
            loopTop: false,
            loopHorizontal: true,
            continuousVertical: false,
            continuousHorizontal: false,
            scrollHorizontally: false,
            interlockedSlides: false,
            dragAndMove: true,
            offsetSections: false,
            resetSliders: false,
            fadingEffect: false,
            normalScrollElements: '#element1, .element2',
            scrollOverflow: true,
            scrollOverflowReset: false,
            scrollOverflowOptions: null,
            touchSensitivity: 15,
            bigSectionsDestination: null,
            fixedElements:'.navigation-bar',
            anchors: ['page1', 'page2', 'page3', 'page4'],
            navigationTooltips: ['sssshefer','works','about','contact'],
            menu: '#myMenu',
            //В основном все значения по умолчанию 
        });
    });
});

/* ----------------------- Specification ----------------------- */
* {
    letter-spacing: 0;
    line-height: normal;

}


html {
    height: 100%;
}

body {
    background: #000;
    height: 100%;
    margin: 0;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

li {
    display: block;
    font-family: 'Museo Sans Cyrl 700', Arial, sans-serif;
}

a {
    display: block;
    margin: 0;
    transition: .3s ease;
}

/* mouse over link */
body a:active {
    opacity: .65;
}

a:hover {
    text-decoration: none;
    opacity: 0.88;
    color: #000;
}

.card {
    border: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

p {
    font-family: 'Museo Sans Cyrl 700', Arial, sans-serif;

}

/* ----------------------- Index ----------------------- */

/* ------- header ------- */

.header {
    background-color: #000;
}

/* ------- Navigation - bar ------- */



.myMenu {
    position: fixed;
    height: 100vh;
    right: 90px;
    top: 0;
    background-color: transparent;
    z-index: 10;
}

.myMenu li a {
    color: #fff;
}

.active a{
    color: #444;
}



.offer {
    height: 100vh;
    padding-bottom: 20px;
}

.offer__title {
    font-family: 'Museo Sans Cyrl 700', Arial, sans-serif;
    color: #fdffb5;
    font-size: 8em;
    margin-left: 40px;
}

.offer__text {
    color: #fff;
    font-size: 7.1em;
}

/* ------- Works ------- */

.works {
    height: 100vh;
    font-size: 90px;
    color: #fff;
    text-align: center
}

/* ------- About ------- */

.about {
    height: 100vh;
    font-size: 90px;
    color: #fff;
    text-align: center
}

/* ------- Contact ------- */

.contact {
    height: 100vh;
    font-size: 90px;
    color: #fff;
    text-align: center

}

/* ------- Navigation - bar ------- */

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="fonts/MuseoSansCyrl/stylesheets.css">
    <link rel="stylesheet" href="styles/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="styles/bootstrap/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="fullpage/fullpage.min.css"/>


    <link rel="stylesheet" href="styles/main.css">
    <title>sssshefer</title>
</head>
<body>
<div id="fullpage" class="layout">
    <header class="header section" id="page1">
        <div class="offer d-flex align-items-center">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-6 d-flex align-items-center">
                        <h1 class="offer__title">
                            sssshefer
                        </h1>
                    </div>
                    <div class="col-6">
                        <p class="offer__text">
                            Front-end developer
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <section class="works section" id="page2">
        works
    </section>
    <section class="about section" id="page3">
        about
    </section>
    <section class="contact section" id="page4">
        contact
    </section>
</div>
<div class="navigation-bar d-flex">
    <div class="container-fluid">
        <div class="row">
            <div class="col-4 ml-auto">
                <ul id="myMenu" class="myMenu d-flex flex-column justify-content-around">
                    <li data-menuanchor="page1" class="d-none">
                        <a href="#page1">
                            sssshefer
                        </a>
                    </li>
                    <li data-menuanchor="page2">
                        <a href="#page2">
                            Works
                        </a>
                    </li>
                    <li data-menuanchor="page3">
                        <a href="#page3">
                            About
                        </a>
                    </li>
                    <li data-menuanchor="page4">
                        <a href="#page4">
                            Contact
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- jQuery -->
<script src="js/jQuery/jquery-3.4.1.min.js"></script>
<!-- jQuery-ui -->
<script src="js/jQuery-ui/jquery-ui.min.js"></script>
<!-- FullPage -->
<script src="fullpage/fullpage.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

Answer 1

Спустя час изучения документации понял, что пропустил такую строку: "Внимание! обозначения data-anchor не могут иметь значение, совпадающее с каким-либо элементом ID на сайте (или элементом NAME - для IE)."

БЛОГ НА HUSL

Пропускает одну секцию при прокрутке fullPage

Ответы (1 шт):