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

所属分类:UI-滚动

 45944  370  查看评论 (15)
分享到微信朋友圈
X
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全屏视差滚动效果
  滚动
 38489  402

向下滚动加载动画特效插件AOS

向下滚动网页加载动画特效插件AOS
  滚动
 31006  404

文字轮播无缝滚动

文字轮播无缝滚动
  滚动
 62308  528

jQuery简单的文字跑马灯特效

这是一款非常简单的jQuery文字跑马灯特效插件。该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动。
  滚动
 202934  330

讨论这个项目(15)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ?念 空城 0
    2020/10/20 15:21:35
    这个插件的文档或者不压缩的有吗
    回复
    大大大大大介无疆 0
    2017/12/21 10:53:54
    很棒的样子
        青春有价0
        2018/11/15 15:50:58
        怎么得q币
    回复
    子吻亦大 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
        2018/7/19 15:34:54
        固定 定位,不管你怎么滑动 都是在那个位置,以当前浏览器宽度高度为准
        octobertiger0
        2018/11/19 21:23:46
        定位,改变相对位置
        0
        2018/12/10 18:48:00
        改变top值就可以了
        爱你一直0
        2019/6/19 10:37:15
        距离顶端距离加上margin-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
    不错,感谢分享哦 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复