JS滚动和分页实现

一、页面滚动

• element.scrollHeight：为内容可视区域的高度加上溢出（滚动）的距离；
• element.scrollLeft：返回元素左边缘与视图之间的距离；
• element.scrollTop：滚动条在Y轴上的滚动距离；
• element.scrollWidth：返回元素的整体宽度；
• window.scrollBy：按照指定的像素值来滚动内容；
• window.scrollTo：把内容滚动到指定的坐标；
• element.clientHeight：为内容可视区域的高度；

// JS判断滚动到底部，实现动态加载图片
// 滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight
// document.body.scrollTop(没有doctype声明的页面)与document.documentElement.scrollTop(有doctype声明的页面)同时只会有一个值生效

//滚动条在Y轴上的滚动距离
function getScrollTop(){
　　return  scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
}
//文档的总高度
function getScrollHeight(){
  return scrollHeight = document.body.scrollHeight + document.documentElement.scrollHeight;
}
//浏览器视口的高度
function getWindowHeight(){
　　return document.compatMode == "CSS1Compat" ? windowHeight = document.documentElement.clientHeight : windowHeight = document.body.clientHeight;
}
window.onscroll = function(){
　　if(getScrollTop() + getWindowHeight() == getScrollHeight()){
　　　　alert("you are in the bottom!");
　　}
};

二、页面分页

// html页面
<table class="table table-hover">
        <thead>
        <tr>
            <th>日期</th>
            <th>小时</th>
            <th>温度</th>
        </tr>
    </table>
    <table class="table table-hover table-striped" id="table_result">
        <tbody id="table_body_result">
        <tr>
            <td>2017-01-10</td>
            <td>20</td>
            <td>20</td>
        </tr>
        <tr>
            <td>2017-01-10</td>
            <td>20</td>
            <td>20</td>
        </tr>
        <tr>
            <td>2017-01-10</td>
            <td>20</td>
            <td>20</td>
        </tr>
       <!--中间省略多行数据-->
        </tbody>
    </table>
    <div id="barcon" name="barcon"></div>//空的div用来放分页后的表格

// js实现分页
goPage(1,15); // //指的是当前页为第一页，15条数据为一页
    function goPage(pno, psize) {
        var itable = document.getElementById("table_result");//通过ID找到表格
        var num = itable.rows.length;//表格所有行数(所有记录数)
        var totalPage = 0;//总页数
        var pageSize = psize;//每页显示行数
        //总共分几页
        if (num / pageSize > parseInt(num / pageSize)) { // //假设有20条数据，15条数据页
            totalPage = parseInt(num / pageSize) + 1; // //1.333>1 ,所以分为两页
        } else {
            totalPage = parseInt(num / pageSize); // //若有45条数据，则分为3页
        }
        var currentPage = pno;//当前页数
        var startRow = (currentPage - 1) * pageSize + 1;//开始显示的行  1
        var endRow = currentPage * pageSize;//结束显示的行   15
        endRow = (endRow > num) ? num : endRow;
        //遍历显示数据实现分页
        for (var i = 1; i < (num + 1); i++) {
            var irow = itable.rows[i - 1];
            if (i >= startRow && i <= endRow) {
                irow.style.display = "block"; // 当前页的数据
            } else {
                irow.style.display = "none"; // 非当前页的数据
            }
        }
        var tempStr = "";
        if (currentPage > 1) {
            tempStr += "<a href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"><上一页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>"
            for (var j = 1; j <= totalPage; j++) {
                tempStr += "<a href=\"#\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "&nbsp;&nbsp;&nbsp;</a>"
            }
        } else {
            tempStr += "<上一页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            for (var j = 1; j <= totalPage; j++) {
                tempStr += "<a href=\"#\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "&nbsp;&nbsp;&nbsp;</a>"
            }
        }
        if (currentPage < totalPage) {
            tempStr += "<a href=\"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一页>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>";
            for (var j = 1; j <= totalPage; j++) {
            }
        } else {
            tempStr += "  下一页>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            for (var j = 1; j <= totalPage; j++) {
            }
        }
        document.getElementById("barcon").innerHTML = tempStr;
    }

参考：https://www.jianshu.com/p/92a74a3a0e60