Javascript实现DIV滚动自动滚动到底部的代码
Javascript实现DIV滚动自动滚动到底部的代码
发布时间:2016-12-30 来源:查字典编辑
摘要:查询了一下相关的资料,Div没有自动滚动的属性,只能模拟鼠标的滚动来现实想要的效果。关键的部分部分在这里:div.scrollTop=div...

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

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

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

复制代码 代码如下:

<html>

<body>

<div id="divDetail">

<table>

<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教程学习
热门Javascript教程学习
编程开发子分类