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

所属分类:UI-滚动

 6001  51  查看评论 (4)
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>


相关插件-滚动

网站广播插件

网站发布消息的广播插件
  滚动
 11579  89

jQuery滚轮控制轮播图上下切换(原创)

jQuery滚轮控制轮播图上下切换,简单实用
  滚动
 1773  13

容器滚动条自动显隐-SCROLLBAR WITH JSCROLLPANE

有时候,能够在用户真正需要的时候才显示容器的滚动条,而在不需要的时候隐藏就显得很有用处了。几天,那么我即将给大家介绍的这款插件就是当我们把鼠标移动到元素上的时候就显示滚动条,并且滚动显示里面的内容,而鼠标移开则隐藏滚动条。
  滚动
 16765  70

jQuery滚动鼠标图像淡入淡出插件crossfade.js

crossfade.js是一个非常小的jQuery插件程序.当您滚动鼠标时图像实现叉淡入淡出效果。
  滚动
 11953  24

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

    以爱封缄?? 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
    不错,感谢分享哦 回复
取消回复