&!DOCTYPE html&
&html lang="zh-CN"&
&meta charset="UTF-8" /&
&title&滚动条到底部时自己加载新的内容&/title&
&script type='text/javascript' src='js/jquery.js'&&/script&
&script type="text/javascript"&
var page_num=2;
$(document).ready(function(){
$(window).scroll(function(){
if($(document).scrollTop()&=$(document).height()-$(window).height()){
var div1tem = $('#container').height()
var str =''
type:"GET",
url:'ajaxdata',
dataType:'json',
beforeSend:function(){
$('.ajax_loading').show() //显示加载时候的提示
success:function(ret){
$(".after_div").before(ret) //将ajxa请求的数据追加到内容里面
$('.ajax_loading').hide() //请求成功,隐藏加载提示
{/literal}
&div style='width:100%;height:1200px'&文章内容&/div&
&div class='after_div'&&/div&
　　　　 &div class='ajax_loading' style='background:#F0F0F0;height:60width:100%;text-align:line-height:60font-size:18display:position:bottom:0px'&&img src="img/loadinfo.net.gif"& 数据加载中&/div&
阅读(...) 评论()滚动下拉到页面底部加载数据是很多瀑布流网站的做法，那来看看配合jsonp是如何实现的吧，小菜总结记录之用，高手勿喷。
当然本例子采用的是jquery库，后期会做成原生js。
本例的数据调用的是锋利的jquery一书提供的一段json。
首先要先判断页面怎么样才是滚动到底部，也就是scrollTop+window的height是否大于document的height，jquery如下代码:&$(window).scrollTop()+$(window).height()&=$(document).height()；
再给window绑定scroll事件。所以整个页面demo可以这样做:
1 &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
2 &html xmlns="http://www.w3.org/1999/xhtml"&
4 &title&&/title&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
6 &style type="text/css"&
7 * { margin:0; padding:0;}
8 body { font-size:12px;}
9 p{ margin: 5px;}
10 .box{ padding: 10px;}
11 &/style&
引入jQuery --&
13 &script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"&&/script&
14 &script type="text/javascript"&
15 $(function(){
$(window).bind('scroll',function(){show()});
function show()
if($(window).scrollTop()+$(window).height()&=$(document).height())
ajaxRead();
function ajaxRead()
var html="";
type:'get',
dataType:'jsonp',
url:'http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?',
beforeSend:function(){console.log('loading...')},
success:function(data){
$.each(data.items,function(i,item){
html+='&div class="box"&';
html+='&h1&'+item.title+'&/h1&';
html+='&a hreft="'+item.link+'"&&img src="'+item.media.m+'"/&&/a&'
html+='&div&'+item.tags+'&/div&';
html+='&/div&';
$("#resText").append($(html));
complete:function(){console.log('mission acomplete.')}
53 &/script&
54 &/head&
56 &p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&&p&往下拉&/p&
&div id="resText" &
61 &/body&
62 &/html&
拉到底部就是实现异步数据加载了，当然了，实际项目还要加上如果没数据了要怎么显示，怎么操作。这些加判断就行了。
阅读(...) 评论()js实现滚动条滚动到页面底部继续加载
转载 & & 作者：chua1989
这篇文章主要介绍了js实现滚动条滚动到页面底部继续加载，原理很简单，就是为window添加一个scroll事件,需要的朋友可以参考下
这个实例应该说可以很简单，直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理，遇到一些小知识点可以分析一下也算有所得。
原理很简单，就是为window添加一个scroll事件，浏览器每次触发scroll事件时判断是否滚动到了浏览器底部，如果到了底部则加载新数据。关键是计算滚动条是否滚动到了浏览器底部，算法如下
滚动条卷起来的高度 + 窗口高度 & 文档的总高度 + 50/*我这里将滚动响应区域高度取50px*/；如果这个判断为true则表示滚动条滚动到了底部。
&style type="text/css"&
html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
margin: 0;
padding:0;
-webkit-box-sizing: border-
-moz-box-sizing: border-
box-sizing: border-
.waterfllow-loading{
z-index: 2000;
.waterfllow-loading.active{
.waterfllow-loading img.loading-progress{
/*设置等待条水平居于窗口正中*/
margin-left:
margin-right:
/*不能设置margin-top:auto和margin-bottom:auto否则IE下bottom就不顶用了*/
bottom: 30
&div class="waterfllow-loading"&
&img class="loading-progress" src="busy.gif"&
&script type="text/javascript"&
//图片查询中正对浏览器主页面滚动事件处理(瀑布流)。只能使用window方式绑定，使用document方式不起作用
$(window).on('scroll',function(){
if(scrollTop() + windowHeight() &= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
waterallowData();
function waterallowData(){
$('.waterfllow-loading').addClass('active');
/*$.ajax({
type:"post",
data: params,
success:function(data,textStatus,jQXHR){
//添加数据
//隐藏加载条
$('.waterfllow-loading.active').removeClass('active');
获取页面顶部被卷起来的高度函数
//获取页面顶部被卷起来的高度
function scrollTop(){
return Math.max(
document.body.scrollTop,
//firefox/IE
document.documentElement.scrollTop);
　　chrome浏览器和Firefox/IE对滚动条是属于body还是html理解不同导致处理不同。
获取页面文档的总高度
//获取页面文档的总高度
function documentHeight(){
//现代浏览器（IE9+和其他浏览器）和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
　　这个算法和jQuery计算文档高度的方法一致。
获取页面浏览器视口的高度
function windowHeight(){
return (document.compatMode == "CSS1Compat")?
document.documentElement.clientHeight:
document.body.clientH
　　这里需要说明的是document.compatMode这个东东。很陌生，一般情况貌似没有遇到过。
　　document.compatMode有两个取值"BackCompat"和"CSS1Compat"。官方解释是BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启。
　　IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样，但在Quirks Mode模式下则有很大差别，而在不声明Doctype的情况下，IE默认又是Quirks Mode。
　　举个例子说明两种模式之间的差别有多大。
　　当document.compatMode等于"BackCompat"时，浏览器客户区宽度是document.body.clientWidth；
　　当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。
　　还有其他属性类似。这里不说了，但是我们可以预见两种模式导致IE渲染的基石都更改了，可想而知构建出来的建筑物差别当有多大。
　　所以请为每一个页面声明Doctype不仅仅是一个好习惯，而且是一个必要的处理。Quirks Mode可以进垃圾堆了。
　　好了下面附上完整的代码，有一个小例子（没有后台刷数据，只是显示等待条）
&!DOCTYPE html&
&html lang="ch-cn"&
　　&meta charset="utf-8"&
　　&script type="text/javascript" src='jquery-1.9.1.js'&&/script&
&style type="text/css"&
html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
margin: 0;
padding:0;
-webkit-box-sizing: border-
-moz-box-sizing: border-
box-sizing: border-
.waterfllow-loading{
z-index: 2000;
.waterfllow-loading.active{
.waterfllow-loading img.loading-progress{
/*设置等待条水平居于窗口正中*/
margin-left:
margin-right:
/*不能设置margin-top:auto和margin-bottom:auto否则IE下bottom就不顶用了*/
bottom: 30
&body style="background:#ff0;height:1000"&
&div class="waterfllow-loading"&
&img class="loading-progress" src="busy.gif"&
&script type="text/javascript"&
//获取页面顶部被卷起来的高度
function scrollTop(){
return Math.max(
document.body.scrollTop,
//firefox/IE
document.documentElement.scrollTop);
//获取页面文档的总高度
function documentHeight(){
//现代浏览器（IE9+和其他浏览器）和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
//获取页面浏览器视口的高度
function windowHeight(){
//document.compatMode有两个取值。BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启。
return (document.compatMode == "CSS1Compat")?
document.documentElement.clientHeight:
document.body.clientH
&script type="text/javascript"&
//图片查询中正对浏览器主页面滚动事件处理(瀑布流)。只能使用window方式绑定，使用document方式不起作用
$(window).on('scroll',function(){
if(scrollTop() + windowHeight() &= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
waterallowData();
function waterallowData(){
$('.waterfllow-loading').addClass('active');
/*$.ajax({
type:"post",
data: params,
success:function(data,textStatus,jQXHR){
//添加数据
//隐藏加载条
$('.waterfllow-loading.active').removeClass('active');
里面的加载条图片为
以上就是滚动条滚动到页面底部继续加载的处理实例，希望对大家的学习有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具公司微信公众号的网页由ThinkPHP框架的模板生成，由一个需求是滑动到底部时自动加载下一页内容。
1、网页结构
网页分为两个部分，顶部固定导航栏，下部有一个page容器，内部滚动显示。
2、加载下一页的流程
当滑动到底部时，发送ajax请求下一页内容，内容返回后，将内容拼接成HTML结构后插入原有的page下。
页面是后端已经分好的，所以ajax请求的数据中包含一个currentpage变量，这个变量每次请求时自增1，表示请求下一页。
3、如何实现
想着原理比较简单，所以自己实现了一下，实现思路便是通过滚动事件监听“加载更多”这个page最底部的div的位置，他的offset.top+自身height=整个屏幕height时，便代表滚动到底部了，可以开始ajax请求了。
根据实际项目需求，简单封装了一下这个过程：
function Loading_zc(isleft_bool, post_data_json, create_html_func, url_str) {
this.isleft = isleft_
this.isloading = false;
this.url = url_
this.info = post_data_
this.create_html = create_html_func.bind(this);
this.box_height = $('#container').height();
this.loading_timer = null;
Loading_zc.prototype = {
constructor: Loading_zc,
load_more: function() {
var _this = this;
$('.weui-loadmore').html('&span class="weui-loadmore__tips click_to_load"&加载更多&/span&');
$(".click_to_load").click(function(event) {
if (!_this.isloading) {
_this.fetch_by_ajax(_this.url, _this.info);
in_loading: function() {
$('.weui-loadmore').html('&i class="weui-loading"&&/i&&span class="weui-loadmore__tips"&正在加载&/span&');
no_more: function() {
$('.weui-loadmore').html('&span class="weui-loadmore__tips"&无更多数据&/span&');
show_date: function(str) {
var d = + str.substr(6,13);
var _date = new Date(d);
var year = _date.getFullYear();
var month = ('' + (+_date.getMonth() + 1)).length == 2 ? (+_date.getMonth() + 1) : '0' + (+_date.getMonth() + 1);
var date = _date.getDate();
return year+ '/' + month + '/' +
show_week: function(str) {
var d = + str.substr(6,13);
var _date = new Date(d);
var day = _date.getDay();
var week_arr=["周日","周一","周二","周三","周四","周五","周六"];
return week_arr[day];
fetch_by_ajax: function(url, info) {
var _this = this;
console.log('start loading');
this.isloading = true;
this.in_loading();
this.info.currentpage += 1;
type: 'POST',
dataType: 'json',
data: {info: info},
success: function(data) {
_this.isloading = false;
if (data.isleft) {
_this.load_more();
_this.no_more();
_this.isleft = false;
var _h = _this.create_html(data.datas);
$(_h).insertBefore('.weui-loadmore');
init: function() {
var _this = this;
$(".page").on('scroll', function() {
if (!_this.isleft || _this.isloading) {
return false;
if (_this.loading_timer) {
clearTimeout(_this.loading_timer);
_this.loading_timer = setTimeout(function() {
var o = $('.weui-loadmore').offset();
if (o.top + o.height - 3 &= _this.box_height) {
_this.fetch_by_ajax(_this.url, _this.info);
$(".click_to_load").click(function(event) {
if (!_this.isloading) {
_this.fetch_by_ajax(_this.url, _this.info);
调用逻辑：
// -----------------------------------
// ---------loading_zc.js-ajax加载数据
// 1-是否有剩余数据
var isleft = "{$isleft}";
// 2-拼装post数据
var regcode = "{$regcode}";
var consumermid = + "{$consumermid}";
var startTime = "{$starttime}";
var endTime = "{$endtime}";
var currentpage = + "{$currentpage}";
var info = {
"regcode": regcode,
"consumermid": consumermid,
"startTime": startTime,
"endTime": endTime,
"currentpage": currentpage
// 3-将ajax返回数据进行拼装
function create_html(datas) {
var len = datas.
var _html = '';
for (var i = 0; i & i++) {
var data = JSON.parse(datas[i]);
console.log(data);
var pt = data.PayTime.substr(6, 10);
var item = '&a href="/WxPurchase/purchaseHistoryDetail?billmid=' +
data.Mid + '&regcode={$regcode}&regname={$regname}&payprice=' +
data.PayTotal + '&petname=' + data.PetName + '&paytime=' + pt + '"&' +
'&div class="weui-panel weui-cell_access"&' +
'&div class="weui-panel__bd"&' +
'&div class="weui-media-box weui-media-box_text"&' +
'&h4 class="weui-media-box__title"&-￥' + data.PayTotal + '&/h4&' +
'&p class="weui-media-box__desc"&' + this.show_date(data.PayTime) + '（' + this.show_week(data.PayTime) + '）' +
'&&&&宠物：' + data.PetName + '&/p&&/div&&/div&&span class="weui-cell__ft"&&/span&&/div&&/a&';
// 4-post目标url
var url = '/WxPurchase/ajaxPurchaseHistory';
// 5-创建实例并加载
var loading = new Loading_zc(isleft, info, create_html, url);
loading.init();
// -----------------------------------
其中监听滚动的时候注意函数节流，快速滚动时不要每次都计算一下底部div的位置。
show_date和show_week在业务的个别情况下用到。
4、实现效果
效果就是像第一个图一样（这里每页显示1个），由于内容太少无法滚动，所以可以使用点击加载更多来实现加载，这时“加载更多”会变成“正在加载”，当请求完毕，会根据请求结果中的isleft（表示是否还有更多数据可以请求，这里是后端给的）字段来判断是显示“加载更多”或者显示“无更多数据”。
5、下一步需要解决的问题
跳转到其他链接后再点击返回到这一页时，ajax请求结果便都没有了，这个问题可能可以通过处理history对象来解决。
阅读(...) 评论()jquery ajax 局部刷新老是跑回页面顶部_百度知道
jquery ajax 局部刷新老是跑回页面顶部
我是用jquery ajax来更新Highcharts的数据，Highcharts的图标的低于页面的高度的地方（也就是说有下拉滚动条），每次刷新后页面都会跑回页顶，这是为什么啊？
type : &POST&,
url : url,
success : function(jsondata) {
data = eval(j...
我有更好的答案
按照我的推测，你说的跑回页面顶端和你的代码没有一毛钱关系。你是不是有一个链接，链接的点击事件去调用的 ajax 代码，像下面这样？&a&href=&#&&onclick=&your_ajax_func();&&&&img&src=&&&alt=&一个图标&&/&&/a&&如果要是这样的话，你就把它改成：&a&href=&javascipt:void(0);&&onclick=&your_ajax_func();return&&&&&img&src=&&&alt=&一个图标&&/&&/a&就能解决了。以上，请采纳，请给分。
正解，但是我觉得还是用&a href=&####& onclick=&your_ajax_func();& &&img src=&& alt=&一个图标& /&&/a&比较好。
都可以，明白发生问题的原因就可以了。不客气。
采纳率：85%
这点代码看不出问题
为您推荐：
其他类似问题
jquery的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。