HTML页面滑动到最底部触发事件

其实基本原理做一个判断，如果 页面总高度 = 视口高度 + 浏览器窗口上边界内容高度 ，那么就是把页面滑动到了最低部，然后执行一个事件。

//要触发的事件（自己定义事件的内容）

　　function ajax_function() {

　　　　window.location.href = 'http://baidu.com';

　　}

　　var timeoutInt; // 要保证最后要运行一次

　　// window.onscroll窗口添加滚动条事件

　　window.onscroll = function () {

　　　　setTimeout(function () {

　　　　　　if (timeoutInt != undefined) {

　　　　　　　　window.clearTimeout(timeoutInt);

　　　　　　}

　　　　　　timeoutInt = window.setTimeout(function () {

　　　　　　　　//监听事件内容

　　　　　　　　if(getScrollHeight() == getDocumentTop() + getWindowHeight()){

　　　　　　　　　　//当滚动条到底时,这里是触发内容

　　　　　　　　　　//异步请求数据,局部刷新dom

　　　　　　　　　　ajax_function()//调用上面自定义的事件函数。

　　　　　　　　}

　　　　　　}, 105);

　　　　}, 100);

　　}

　　//（浏览器窗口上边界内容高度）

　　function getDocumentTop() {

　　　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;

　　　　if (document.body) {

　　　　　　bodyScrollTop = document.body.scrollTop;

　　　　}

　　　　if (document.documentElement) {

　　　　　　documentScrollTop = document.documentElement.scrollTop;

　　　　}

　　　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;

　　　　console.log("scrollTop:"+scrollTop);

　　　　return scrollTop;

　　}

　　//可视窗口高度（屏幕可以看见的高度）

　　function getWindowHeight() {

　　　　var windowHeight = 0;

　　　　if (document.compatMode == "CSS1Compat") {

　　　　　　windowHeight = document.documentElement.clientHeight;

　　　　} else {

　　　　　　windowHeight = document.body.clientHeight;

　　　　}

　　　　console.log("windowHeight:"+windowHeight);

　　　　return windowHeight;

　　}

　　//滚动条滚动高度（即整个网页的高度）

　　function getScrollHeight() {

　　　　var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;

　　　　if (document.body) {

　　　　　　bodyScrollHeight = document.body.scrollHeight;

　　　　}

　　　　if (document.documentElement) {

　　　　　　documentScrollHeight = document.documentElement.scrollHeight;

　　　　}

　　　　scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;

　　　　console.log("scrollHeight:"+scrollHeight);

　　　　return scrollHeight;

　　}