jquery页面滚动定位（支持上下滑动）

查看演示立即下载

插件描述：jquery页面滚动定位（支持上下滑动）

在页面上方引入：（注：对 jquery 的版本要求不高）

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/pagescroller.min.js"></script>

页面结构：

<div id="div_box" class="light">
  <a href="#" class="prev">
    <img src="./images/icon_arrow-up_light.png" alt="" width="28" height="31" /></a>
  <a href="#" class="next">
    <img src="./images/icon_arrow-down_light.png" alt="" width="28" height="31" /></a>
</div>
<div id="wrapper">
  <div id="main">
    <div class="section">
      <h1>内容一</h1></div>
    <div class="section">
      <h1>内容二</h1></div>
    <div class="section">
      <h1>内容三</h1></div>
    <div class="section">
      <h1>内容四</h1></div>
    <div class="section">
      <h1>内容五</h1></div>
  </div>
  <!-- [END] #main --></div>
<!-- [END] #wrapper --></body>

最后在底部加入：

<script type="text/javascript">
    $(document).ready(function() {
        var navLabel = new Array('Introduction', 'How It Works', "What's Included?", 'Documentation', 'Download Plugin');
        $('#main').pageScroller({
            navigation: navLabel
        });
        $('.next').click(function(e) {
            e.preventDefault();
            pageScroller.next();
        });
        $('.prev').click(function(e) {
            e.preventDefault();
            pageScroller.prev();
        });
    });
</script>

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： LArea移动端城市选择控件
下一个特效： jQuery答题试卷并且评分