Javascript实现DIV滚动自动滚动到底部的代码


Posted in Javascript onMarch 01, 2012

查询了一下相关的资料,Div没有自动滚动的属性,只能模拟鼠标的滚动来现实想要的效果。

关键的部分部分在这里:div.scrollTop = div.scrollHeight;

下面是具体实现的精简代码:

<html> 
<body> 
<div id="divDetail" style="overFlow-y:scroll; width:250px;height: 200px;"> 
<table style="border:1px solid; "> 
<tr><td>id</td><td>name</td><td>age</td><td>memo</td></tr> 
<tr><td>000001</td><td>name1</td><td>24</td><td>memomemomemomemomemo</td></tr> 
<tr><td>000002</td><td>name2</td><td>23</td><td>memomemomemomemomemo</td></tr> 
<tr><td>000003</td><td>name3</td><td>23</td><td>memomemomemomemomemo</td></tr> 
<tr><td>000004</td><td>name4</td><td>23</td><td>memomemomemomemomemo</td></tr> 
<tr><td>000005</td><td>name5</td><td>23</td><td>memomemomemomemomemo</td></tr> 
<tr><td>000002</td><td>name2</td><td>23</td><td>memomemomemomemomemo</td></tr> 
<tr><td>000003</td><td>name3</td><td>23</td><td>memomemomemomemomemo</td></tr> 
<tr><td>000004</td><td>name4</td><td>23</td><td>memomemomemomemomemo</td></tr> 
<tr><td>000005</td><td>name5</td><td>23</td><td>memomemomemomemomemo</td></tr> 
</table> 
</div> 
</body> 
<script type="text/javascript" defer> 
var div = document.getElementById('divDetail'); div.scrollTop = div.scrollHeight; 
//alert(div.scrollTop); 
</script> 
</html>

其实,实现是很简单的但是一般很少有这种需求,期间还是走了一些弯路。
Javascript 相关文章推荐
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
Vue实现附件上传功能
May 28 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 #Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 #Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 #Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 #Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 #Javascript
Jquery提交表单 Form.js官方插件介绍
Mar 01 #Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 #Javascript
You might like
PHP的开合式多级菜单程序
2006/10/09 PHP
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
浅析vue-router原理
2018/10/19 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
配置eslint规范项目代码风格
2019/03/11 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
python脚本实现查找webshell的方法
2014/07/31 Python
Django REST framework内置路由用法
2019/07/26 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
Internet主要有哪些网络群组成
2015/12/24 面试题
大学生职业生涯设计书
2014/01/02 职场文书
三项教育活动实施方案
2014/03/30 职场文书
对祖国的寄语大全
2014/04/11 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
应聘会计求职信
2014/06/11 职场文书
房产公证书
2015/01/23 职场文书
商务考察邀请函模板
2015/02/02 职场文书
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL