Skrollr菜单中断

时间:2014-02-01 21:58:08

标签: html css menu skrollr

我在网站上使用Skrollr和Skrollr菜单作为我的高级顶点。我将这些div设置为在同一位置淡入和淡出,类似于幻灯片。我的问题是,当我点击prev和next链接时,它会跳回到页面顶部。当我点击它们时,我想让它“向下”滚动到下一张幻灯片。我尝试过使用data-menu-top但是没有运气使用它。

                <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>

0 个答案:

没有答案