文档章节

页面加载新的东西到页面底部

小老傅
 小老傅
发布于 2014/12/08 11:35
字数 230
阅读 87
收藏 8

js的代码部分:

<!-- lang: js -->
<script type="text/javascript" src="<%=basePath%>/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
	$(function(){
		
		$("#send").click(function(){
			$("#resText").load("test.html #001");
			
		});
		
		

	$(window).scroll(function() {
			var scrollTop = $(this).scrollTop();
			console.info("scrollTop="+scrollTop);
			var scrollHeight = $(document).height();
			console.info("scrollHeight="+scrollHeight);
			var windowHeight = $(this).height();
			console.info("windowHeight="+windowHeight);
			if (scrollTop + windowHeight == scrollHeight) {
				alert("已经到底部了!");
				//此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作
				$("<div>我是div的东西</div>").appendTo("body");
			}
		});

	});
</script>

下面的是页面的部分代码:

<!-- lang: html -->
<body>
<ul>

		<li>1232123132</li>
		<li>1232123132</li><li>1232123132</li><li>1232123132</li><li>1232123132</li><li>1232123132</li><li>1232123132</li><li>1232123132</li><li>1232123132</li><li>1232123132</li><li>1232123132</li><li>1232123132</li>
		<li>poppoweppkd</li>
		
		<li>poppoweppkd</li><li>poppoweppkd</li><li>poppoweppkd</li>
		<li>poppoweppkd</li><li>poppoweppkd</li><li>poppoweppkd</li>
</ul>

</body>

© 著作权归作者所有

共有 人打赏支持
小老傅
粉丝 7
博文 44
码字总数 35819
作品 0
海淀
程序员
如何测试Ajax动态分页列表的最大可翻页数?

原文作者:西安鲲之鹏 原文链接:http://www.site-digger.com/html/articles/20150718/94.html 现在使用Ajax技术的网站越来越多,一个常见的应用就是动态分页:当列表页面滚动底部时,下一页的...

西安鲲之鹏
2015/09/25
49
0
MooTools教程(6):操纵HTML DOM元素

我们已经学习过如何来选取DOM元素,怎么创建数组,怎么创建函数,怎么把事件添加到元素,今天我们来深入地学习一下如果操纵HTML元素。通过 MooTools 1.2,你可以添加新元素到一个HTML页面中,...

halfcoder
2010/12/25
0
2
yii2 如何在页面底部加载css和js

作者:白狼 出处:http://www.manks.top/article/yii2loadjscssin_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任...

白狼栈
2016/04/20
124
0
JS的相关概念

1. CSS和JS在网页中的放置顺序是怎样的? CSS最好放入header中,即放在网页内容(html标签中包含的文字和图片等)和js脚本之前 S最好放在最后,即放在网页内容(html标签中包含的文字和图片等...

熊蛋子17
2017/11/28
0
0
微信小程序之上拉加载与下拉刷新

在移动端,随着手指不断向上滑动,当内容将要到达屏幕底部的时候,页面会随之不断的加载后续内容,直到没有新内容为止(我们是有底线的-o-),我们称之为上拉加载,从技术角度来说,也可以称...

一斤代码
03/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

windows nvm 安装 node

nvm 是 node 的版本控制管理 下面是下载 nvm 的地址,选择 nvm-setup.zip 下载 https://github.com/coreybutler/nvm-windows/releases 就是下一步下一步,一键安装 基本命令有: nvm arch [32...

U_I_A_N
3分钟前
0
0
函数式组件完整例子

之前创建的组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法。它只是一个接收参数的函数。 在下面这个例子中,我们标记组件为 functional,这意味它是无状态 (没有响...

tianyawhl
18分钟前
0
0
linux shell大文件操作

查找字符串所在行 : grep -n “待查找字符串” “文件名” 显示指定行信息:sed -n 1p “指定文件” 表示显示指定文件第一行的信息 ----------------------------------------------------...

悲催的古灵武士
18分钟前
0
0
centos7安装nexus3

centos7安装nexus3 2018年05月24日 16:20:34 阅读数:257 1、下载nexus wget https://sonatype-download.global.ssl.fastly.net/repository/repositoryManager/3/nexus-3.12.0-01-unix.tar.......

linjin200
20分钟前
0
0
springboot整合cxf发布webservice以及调用

webservice性能不高,但是现在好多公司还是在用,恰好今天在开发的时候对接项目组需要使用到webservice下面来说下简单的案例应用 首先老规矩:引入jar包 <dependency><groupId>org.apach...

落叶清风
24分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部