js如何编写带滚动条并自动滑动至底部的页面

 时间:2026-02-13 08:36:15

1、打开电脑新建一个文件命名为cs.html,如图所示:

js如何编写带滚动条并自动滑动至底部的页面

2、用记事本打开编辑内容为:

<html>

<head></head>

<body>

<script type="text/javascript">

                function add()

                {

                    var date = new Date();

                    var test = document.getElementById('test');

                    test.innerHTML = test.innerHTML + '===' + date.getTime() + '<br />';

                    test.scrollTop = test.scrollHeight;

                }

            </script>

<div id="test" style="overflow:auto; height: 100px; width: 500px; border: 1px solid #000;">

            </div>

<button id="bt" style="margin-left:100px;height:30;width:50; margin-top:50px;" onclick="add()"></button>

</body>

</html>

js如何编写带滚动条并自动滑动至底部的页面

3、双击或者右键选择浏览器打开,则显示一个文本框 和一个按钮,如果所示: 

js如何编写带滚动条并自动滑动至底部的页面

4、连续点击按钮,当文本记录多出文档的时候会出现滚动条。

js如何编写带滚动条并自动滑动至底部的页面

5、上图的滚动条没有自动下滑至底部,需要增加代码:test.scrollTop = test.scrollHeight;  设置垂直偏移量的高度,则滚动条下滑至底部

js如何编写带滚动条并自动滑动至底部的页面

6、再继续点击,效果如图。滚动条随着文本的增加而滚动。

怎么样?同学们是不是很简单?

js如何编写带滚动条并自动滑动至底部的页面

  • 新年好手抄报怎么画
  • GAAP是什么意思
  • 怎样拥有性感背部
  • Word怎么绘制四线三格拼音格?
  • 表达感谢的高级句子
  • 热门搜索
    普洱茶的冲泡方法 快速祛痘的方法 美的净水器怎么样 网站推广方法 家常饼怎样烙才松软 酱肘子的家常做法 家常菜做法大全 小儿湿疹的治疗方法 塑料瓶手工制作大全 油焖尖椒的家常做法