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

所属分类:UI-滚动

 10757  80  查看评论 (9)
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>


相关插件-滚动

双向垂直上下滚动

垂直滚动插件,可切换向上或向下方向滚动。
  滚动
 15594  51

类似fullPage的全屏滚动插件

这是一款类似fullPage的全屏滚动插件,使用很简单
  滚动
 20925  97

简洁的jQuery滚动条插件scrollBar.js

本插件会将容器中滚动条样式进行统一,通过修改css任意改变滚动条的宽度与颜色,实现自定义滚动条的目的。
  滚动
 3881  26

jquery无缝滚动

真正的无缝滚动
  滚动
 22155  155

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

    大大大大大介无疆 0
    2017/12/21 10:53:54
    子吻亦大 0
    2017/12/18 18:54:23
    请问有人知道在前面加了fixed 的div后 如何滚动才能让定位点距离顶部一定的距离呢 ?
        自渡1
        2017/12/21 13:27:37

        固定定位  脱离文档流 不管你怎么移动   都在那个文字  你用top:XXpx  然后就可以了啊

        harvey_y20
        2017/12/26 14:42:40

        fixed 是相对窗口定位的了

        相遇查尔街1
        2017/12/26 17:54:35

        定位后,改变top的值

    回复
    以爱封缄?? 0
    2017/4/11 16:02:09
    lhs8010 0
    2016/11/16 15:11:11
    不错,项目正好要用。
        攻城狮20150
        2016/11/16 16:11:03
        谢谢!
    回复
    KD 0
    2016/7/13 21:07:22
    不错,感谢分享哦 回复
取消回复