Fullpage js slide effect? - html

Question

I'm trying to use Fullpage.js. Here is my script:
<div id="fullpage" style="margin-top: 55px">
<div class="section" id="first" style="background-color: red">Some section - Home</div>
<div class="section" id="services" style="background-color: blue">Some section - Services</div>
<div class="section" id="why" style="background-color: green">Some section - Why</div>
<div class="section" id="portofolio" style="background-color: red">Some section - Portofolio</div>
<div class="section" id="price" style="background-color: blue">Some section - Price</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
menu: '#navbarNav',
css3: true,
scrollingSpeed: 1000
});
});
</script>
The problem is, there is no slide effect in my HTML page. Any solutions? I don't see any errors in my browser console.
UPDATE
There is a second problem, When I scroll to random section then I click the menu, the anchor is not working, I mean it keeps at the section which I scroll.

Answer 1

You need to define your anchors in your script, like this:
$(document).ready(function() {
$('#fullpage').fullpage({
menu: '#navbarNav',
css3: true,
scrollingSpeed: 1000,
anchors:['first, 'secondPage', 'why', 'portofolio', 'price']
});
};
Source: https://github.com/alvarotrigo/fullPage.js#fullpagejs

Answer 2

please, could you insert your javascript code inside the $(document).ready() to be sure that it is ready to execute. In your case, it should be something like:
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
menu: '#navbarNav',
css3: true,
scrollingSpeed: 1000
});
};
</script>
Hope this can resolve your problem.
Thank you

Answer 3

You need to write the ID on href anchor attribute like this
<ul id=#menu>
<li data-menuanchor="first" class="active">
First
</li>
<li data-menuanchor="services" class="active">
Services
</li>
</ul>