如何使用jQuery-One-Page-Nav和jQuery.Serial一起滚动以启用" prev"和" next"按钮或箭头?

时间:2013-09-24 21:35:44

标签: javascript jquery navigation scrollto serialscroll

当我到达页面中的某些“部分”时,我正在尝试使用 jQuery-One-Page-Nav 的单页解决方案来突出显示菜单链接(并单击以滚动到相应的部分)。

在这部分内部我有一些像代码

的帖子
<body>
<nav>
    <ul class="menuslides">
        <li class="item-1">
            <a href="#section-1" >One</a>
        </li>
        <li class="item-2">
            <a href="#section-2" >Two</a>
        </li>
        ...
    </ul>
</nav>
<div id="wrapper">
    <div id="wrap"> 
        <section id="section-1">
            <div class="post" id="item-slide-1">img</div>
            <div class="post" id="item-slide-2">img</div>
        </section>
        <section id="section-2">
            <div class="post" id="item-slide-3">img</div>
            <div class="post" id="item-slide-4">img</div>
            <div class="post" id="item-slide-5">img</div>
        </section>
        ...
        <section id="section-10">
             <div class="post" id="item-slide-31">img</div>
             ...
        </section>
     </div>
     <div id="buttons">
         <div id="button" class="goto-prev">Prev</div>
         <div id="button" class="goto-next">Next</div>
     </div>
</div>
<script>
    jQuery(document).ready(function() {
        jQuery('.menuslides').onePageNav();             
    });

    jQuery(function( $ ){
        $('#wrapper').serialScroll({            
        target:'#wrap',
    items:'.post', 
    prev:'div.goto-prev',
    next:'div.goto-next',
    axis:'y',       
    duration:700,
        onBefore:function( e, elem, $pane, $items, pos ){           
                 e.preventDefault();
         if( this.blur )
                 this.blur();
             },
    onAfter:function( elem ){           
             }
    });
    });

</script>


</body>

我对 jQuery-One-Page-Nav 感到满意,效果非常好,我可以使用导航菜单浏览“部分”。

但我需要添加两个按钮或两个箭头,它们的工作方式与上一个下一个链接在我的帖子中滚动页面 class =“post”

我正在使用 https://github.com/davist11/jQuery-One-Page-Navhttps://github.com/flesler/jquery.serialScroll 没有奇怪的代码更改(只重命名的ID和类)但我不能让它们共存:它只能运行其中一个!

是否有任何解决方案可以让它们共存,或者是否有一段代码可以让我同时拥有这两个功能?

0 个答案:

没有答案