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

所属分类:UI-滚动

 4936  45  查看评论 (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>


相关插件-滚动

CSS3 纵向滚屏翻页,支持键盘,鼠标滚轮操作

CSS3 纵向滚屏翻页,支持键盘,鼠标滚轮操作
  滚动
 19914  130

纯js轻量级滚动视觉差特效插件rellax

一款轻量级的纯Javript滚动视觉差特效插件
  滚动
 5340  37

jQuery无限滚动新闻插件tickerNews

tickerNews 是一个轻量级但有很强大的 jQuery 新闻滚动插件,你可以使用它让一个新闻列表进行无限的滚动。
  滚动
 1492  12

jquery整屏滚动插件Scrollify

Scrollify是一个jQuery插件,协助整屏滚动和顺利拍摄部分。完全可配置和优化。
  滚动
 40133  179

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

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

    攻城狮2015

    广东省深圳市