ScrollIt.js是一款网页垂直滚动导航jquery插件-BFW插件库

ScrollIt.js是一款网页垂直滚动导航jquery插件

ScrollIt.js 是一个易于使用且轻量级的jQuery 插件，允许您使用键盘上下键或单击滚动导航链接滚动到网页的一部分。非常适合创建长且垂直滚动的网页。

使用方式：

第一步引入jquery和ScrollIt

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ScrollIt.1.0.3.js"></script>

第二步配置参数

$.scrollIt({
upKey: 38, // 导航到下一页的键盘key code
downKey: 40, // 导航到上一页的键盘key code
easing: 'linear', // 页面滚动过渡效果
scrollTime: 600, // 滚动时间 ms
activeClass: 'active', //当前页面的导航class名
onPageChange: null, // function(pageIndex)当页面滚动后的回调函数
});

完整代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>
   
</head>

<body>
    <nav>
        <ul>
            <li> <a class='active' data-scroll-nav='0'>Link 1</a> </li>
            <li> <a data-scroll-nav='1'>Link 2</a> </li>
            <li> <a data-scroll-nav='2'>Link 3</a> </li>
            <li> <a data-scroll-nav='3'>Link 4</a> </li>
        </ul>
    </nav>
    <section data-scroll-index='0'>
        <div class='content' style="background:#FFFFCC;">
            1
        </div>
    </section>

    <section data-scroll-index='1'>
        <div class='content' style="background:#CCFFFF;">
            2
        </div>
    </section>

    <section data-scroll-index='2'>
        <div class='content' style="background:#FFCCCC;">
            3
        </div>
    </section>

    <section data-scroll-index='3'>
        <div class='content' style="background:#FFCC99;">
            4
        </div>
    </section>

    <section data-scroll-index='4'>
        <div class='content' style="background:#FFCCCC;">
            5
        </div>
    </section><br type="_moz">
    <style>
    body{
        padding: 0;
        margin: 0;
    }
        section{
            margin: 10px 0;
        }
        ul{
            list-style:none;
            padding: 0;
            margin: 0;
        }
        li{
            margin: 5px;
        }
            nav{
                position: fixed;
                right: 10px;
                top:30%;
                background: white;
                cursor: pointer;
                padding: 10px;
               
                
            }
            .active{
                font-weight: bold;
            }
            .content{
                height: 100vh;
                padding: 10px;
                font-size: 100px;
                
            }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ScrollIt.1.0.3.js"></script>
    <script>
        $(function() { 
        $.scrollIt({
          upKey: 38,             // key code to navigate to the next section
          downKey: 40,           // key code to navigate to the previous section
          easing: 'linear',      // the easing function for animation
          scrollTime: 600,       // how long (in ms) the animation takes
          activeClass: 'active', // class given to the active nav element
          onPageChange: null,    // function(pageIndex) that is called when page is changed
        }); 
        });
    </script>
</body>

</html>