分页功能的实现方法（不需要插件）

分页功能的实现方法

在开发过程中经常会用到分页的功能，除了引用插件外，也可以使用最简单的方式来实现这个功能。下面分享一下我在项目中使用到的分页方法，非常的容易理解和操作，当然，如果觉得效果太一般了，那么使用iScroll.js或者updown.js都可以实现更加炫酷的效果。

下面介绍下使用jQuery实现分页的代码

引用jQuery

<script src="js/jquery.min.js"></script>

实现代码（html）

<article id="content">
  <div id="content-list">
  </div>
</article>

实现代码（js）

$(function() {
  $('#content').scroll(function(){
    var scrollTop = $('#content').scrollTop();  //获取窗口的滑动距离
    var scrollHeight = $('content-list').height();  //获取可视屏幕和超出的页面部分
    var windowHeight = $('content').height();  //获取窗口的高度

    //这里计算方案是窗口的高度 + 滑动的距离 = 总高度的话那么就加载下一页
    if(scrollTop + windowHeight >== scrollHeight) {
      //更新下一页
    }
  });
});

如果已经加载完了所有的数据，那么可以使用下面的代码来取消绑定

$('#content').unbind('scroll');

可以使用下面的代码来快速的回到顶部

$('#content').scrollTop(0);

除了使用jQuery之外，还可以使用原生的JavaScript来实现功能，只需要修改选择器和获取高度的方法就行了。