边栏垂直滚动导航

• 自动滚动到对应ID内容板块；
• 自动添加当前导航对应的样式；
• 可定义随意拖动。

组件CDN

<script src="//ossweb-img.qq.com/images/js/comm/scroller.min.js"></script>

示例代码

<div class="wrap">
    <div id="cont01">第1部分</div>
    <div id="cont02">第2部分</div>
    <div id="cont03">第3部分</div>
    <div id="cont04">第4部分</div>
</div>
<ul id="side-nav">
    <li class="snav"><a href="javascript:;">第1部分</a></li>
    <li class="snav"><a href="javascript:;">第2部分</a></li>
    <li class="snav"><a href="javascript:;">第3部分</a></li>
    <li class="snav"><a href="javascript:;">第4部分</a></li>
</ul>
<script src="//ossweb-img.qq.com/images/js/comm/scroller.min.js"></script>
<script>
    var sideNav=new Scroller({
        navId:"side-nav",//浮动导航的ID
        navs:"li", //导航链接, 可以用标签名或者class名，例如：li或者snav
        conts:["cont01","cont02","cont03","cont04"], //内容板块ID
        cls:"curr", //导航选中class
        drag:true //是否能拖动
    });
</script>

用法示例： 查看演示