Skrollr menu breaks - html

Question

I am using Skrollr and Skrollr Menu on a website for my senior capstone. I have these divs set up to fade in and fade out in the same location, similar to a slideshow. My problem is that when I click the the prev and next links it jumps back to the top of the page. When I click on them I want it to scroll "down" to the next slide. I have tried using data-menu-top but haven't had any luck using it.
<div class="slideContent" data-900="opacity:0;" data-1200="opacity:1;" data-1300="opacity:0;">
<a name="slide2"></a>
<h2>Step One</h2>
To begin, use your pencil to lightly write the word nice and big in the middle your paper. Make sure that it is written lightly because you are going to erase it later.
<br><br>
<a class="prev" href="#slide1" data-menu-top="#"><img src="assets/img/arrow_left.png"></a>
<a class="next" href="#slide3" data-menu-top="#"><img src="assets/img/arrow_right.png"></a>
</div>
<div class="slideContent" data-1300="opacity:0" data-1600="opacity:1;" data-1700="opacity:0;">
<a name="slide3"></a>
<h2>Step Two</h2>
Next, use your pencil to outline the letters.
<br><br>
<a class="prev" href="#slide2"><img src="assets/img/arrow_left.png"></a>
<a class="next" href="#slide4"><img src="assets/img/arrow_right.png"></a>
</div>
<div class="slideContent" data-1700="opacity:0;" data-2000="opacity:1;" data-2100="opacity:0;">
<a name="slide4"></a>
<h2>Step Three</h2>
Now you get to take your markers and trace the outline that you made with your pencil. Then, you take the eraser and erase the pencil lines so that all that is left is the marker outline.
<br><br>
<a class="prev" href="#slide3"><img src="assets/img/arrow_left.png"></a>
<a class="next" href="#slide5"><img src="assets/img/arrow_right.png"></a>
</div>
<div class="slideContent" data-2100="opacity:0;" data-2400="opacity:1;" data-2500="opacity:0;">
<a name="slide5"></a>
<h2>Step Four</h2>
The next couple steps are what make your letters pop out like it's 3D! Lightly draw a dotted line across your paper, a few inches under your word. Then lightly draw an "X" at the very bottom of your page. This will be your vanishing point.
<br><br>
<a class="prev" href="#slide3"><img src="assets/img/arrow_left.png"></a>
<a class="next" href="#slide5"><img src="assets/img/arrow_right.png"></a>
</div>
<div class="slideContent" data-2500="opacity:0;" data-2800="opacity:1;" data-2900="opacity:0;">
<a name="slide6"></a>
<h2>Step Five</h2>
Now, use your ruler and pencil to draw lines from all the corners on your letters to the Vanishing Point. Remember to draw these lines lightly because we will be tracing and erasing them.
<br><br>
<a class="prev" href="#slide3"><img src="assets/img/arrow_left.png"></a>
<a class="next" href="#slide5"><img src="assets/img/arrow_right.png"></a>
</div>
<div class="slideContent" data-2900="opacity:0;" data-3200="opacity:1;" data-3300="opacity:0;">
<a name="slide7"></a>
<h2>Step Six</h2>
Now we are going to erase many of the lines we just drew but it is important to know which ones to get rid of. At this point erase, only erase the lines underneath the dotted line from Step Five and lines that go through your letters.
<br><br>
<a class="prev" href="#slide3"><img src="assets/img/arrow_left.png"></a>
<a class="next" href="#slide5"><img src="assets/img/arrow_right.png"></a>
</div>
<div class="slideContent" data-3300="opacity:0;" data-3600="opacity:1;" data-3700="opacity:0;">
<a name="slide8"></a>
<h2>Step Seven</h2>
Not all the lines you just drew should go all the way to the dotted line. Pay attention to the direction (horizontal/vertical) of the edge of the letters
<br><br>
<a class="prev" href="#slide3"><img src="assets/img/arrow_left.png"></a>
<a class="next" href="#slide5"><img src="assets/img/arrow_right.png"></a>
</div>