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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
JS继承用法实例分析
Feb 05 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
几种响应式文字详解
May 19 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
用最通俗易懂的代码帮助新手理解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
Syphon 秘笈
2021/03/03 冲泡冲煮
Dedecms常用函数解析
2008/02/01 PHP
PHP关联链接常用代码
2012/11/05 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
Python编程实现正则删除命令功能
2017/08/30 Python
python中实现控制小数点位数的方法
2019/01/24 Python
WxPython建立批量录入框窗口
2019/02/27 Python
基于python的列表list和集合set操作
2019/11/24 Python
Python中six模块基础用法
2019/12/08 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
英国电气世界:Electrical World
2019/09/08 全球购物
运动会通讯稿400字
2014/01/28 职场文书
安全生产实施方案
2014/02/23 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
大学入学感言
2015/08/01 职场文书