jquery页面滚动定位(支持上下滑动)

所属分类:UI-滚动

 4703  44  查看评论 (3)
jquery页面滚动定位(支持上下滑动) ie兼容8

在页面上方引入:(注:对 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>


相关插件-滚动

jquery鼠标滑轮改变数字大小

jquery通过滚动鼠标滑轮改变数字大小
  滚动
 5645  32

jQuery单页全屏滚动布局插件AppLikeOnePage.js

AppLikeOnePage.js是一款简单实用的App样式单页全屏滚动布局jQuery插件。通过该插件可以非常容易的创建单页全屏滚动布局,页面不带滚动条,可以通过鼠标或键盘方向键来整屏滚动页面。
  滚动
 8848  104

jQuery鼠标滚轮滚动侦测插件mousewheel.js

jQuery鼠标滚轮滚动侦测插件mousewheel.js
  滚动
 32778  37

返回顶部插件(傻瓜版)。

jquery返回顶部插件
  滚动
 11078  75

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币

    lhs80100
    2016/11/16 15:11:11
    不错,项目正好要用。
        攻城狮20150
        2016/11/16 16:11:03
        谢谢!
    回复
    KD0
    2016/7/13 21:07:22
    不错,感谢分享哦 回复
取消回复
    PROMULGATOR

    攻城狮2015

    广东省深圳市