用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法

如下所示：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>

<script type="text/javascript">
function add()
{
var now = new Date();
var div = document.getElementById('scrolldIV');
div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '<br />';
div.scrollTop = div.scrollHeight;
}
</script>
<div id="scrolldIV" style="overflow:auto; height: 100px; width: 400px; border: 1px solid #999;">
</div>
<input type="button" value="插入一行" onclick="add();">
用js控件div的滚动条，让它在内容更新时自动滚到底部</body>
</html>

以上就是小编为大家带来的用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • 基于JavaScript实现div层跟随滚动条滑动

    在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置 效果展示如下所示: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavScript页面悬浮框- 何问起</title><base target="_blank" /> <

  • 基于javascript实现按圆形排列DIV元素(一)

    基于javascript实现按圆形排列DIV元素(一)

    效果图: 一.分析图: 绿色边框内:外层的DIV元素,相对定位; 白色圆形框:辅助分析的想象形状; 白点:为白色圆形的圆心点,中心点,点o; 圆心角:角NOG; 黄色:需要按圆形排列的,绝对定位的DIV元素; 红色点:为每个黄色DIV的坐标点;即绝对定位时的元素,left值 和 top值 ,设置的点; 二.涉及到的概念定义: 2.1.弧度:弧度是角的度量单位. (红色部分为弧长,角A为弧长对应的圆心角) 弧长等于半径的弧,其所对的圆心角为1弧度.(即两条射线从圆心向圆周射出,形成一个夹角和夹角正

  • js 动态添加元素(div、li、img等)及设置属性的方法

    把一串 html 标签赋给一个 javascript 变量,除属性的值要用转义的双引号外,某些时候字符串还很长,显得有些复杂.如果用 js 动态添加元素,就不会有那么复杂的字符串出现,代码阅读性强一点,也容易理解. 网页是由 html 标签一层层组成的,js 也可以动态添加一层层的诸如 div.li.img 这样的标签.其实,不管是什么 html 标签,js 动态创建的方法都差不多,接着就先从动态添加 div 开始. 一.js 动态添加元素div <div id="parent"

  • JS用斜率判断鼠标进入DIV四个方向的方法

    JS用斜率判断鼠标进入DIV四个方向的方法

    网上大部分判断鼠标移入div移入移出都是使用一下方法: 这个方法确实十分奇特,使用起来十分方便. 后来自己看了一些文章,看到有另一种以斜率的方法来判断鼠标的移动方向. 上图是此方法的示意图,以浏览器左上角做原点,水平轴作为x轴,往右为正:竖直轴作为y轴,向上为正. 中间的div的左上角坐标(x1,y1),右下角坐标(x2,y2),中心点的坐标(x0,y0). 设如图两点的斜率为k(k<0),关于x轴对称的斜率为-k. 另外鼠标刚移入时,鼠标的坐标设为(x,y): window.onload =

  • Javascript点击其他任意地方隐藏关闭DIV实例

    代码如下,实现了点击input显示一个div层,当点击除input和div以外的地方的时候,隐藏div的功能. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>点击其它地方关闭DIV</title> </head> <body> <input type="text" value="

  • JS控制div跳转到指定的位置的几种解决方案总结

    JS控制div跳转到指定的位置的几种解决方案总结

    总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: <div id="container"> <a href="#div1">div1</a> <a href="#div2">div2</a> <a href="#div3">d

  • JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

    本文实例讲述了JS+CSS实现鼠标经过弹出一个DIV框效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • js动态添加的DIV中的onclick事件简单实例

    最简单的是这样: <input type="button" onclick="alert(this.value)" value="我是 button" /> 动态添加onclick事件: <input type="button" value="我是 button" id="bu"> <script type="text/javascript&quo

  • javascript实现随机生成DIV背景色

    随机色有两种格式: 效果预览:http://wjf444128852.github.io/DEMOLIST/JS/test/index.html  1.rgb(xxx,xxx,xxx)  2.#xxxxxx  下面实现两种随机的方法  思路:如何让x都是随机的,  1.中的xxx是0-255之间的随机整数,用Math.random()*255取得0-255之间的随机数,  再Math.floor()保留小数点前面的  2.中的x是0123456789abxdef中的随机6个的组合,  这里可以用

  • js实现非常棒的弹出div

    本文实例为大家分享了一个非常棒的弹出div,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8" /> <title>LIGHTBOX EXAMPLE</title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%

  • JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例

    JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例 document.oncontextmenu = function(){return false}; //禁止鼠标右键菜单显示 var res = document.getElementById('box'); //找到id为box的div document.body.onmouseup = function(e){ //在body里点击触发事件 if(e.button===2){ //如果button=1(鼠标左键),butto

  • javascript实现鼠标点击页面 移动DIV

    <script type="text/javascript"> //那种方式移动 var choMove = false; //是否绑定过click var isClick = true; //引用DIV var oDiv = null; //引用Input var oInput = null; //封装事件绑定的通用对象 var evnetUtil = { addEventHandle:function(oElement,evtype,fun){ oElement.att

  • js控制div层的叠加简单方法

    js控制div层的叠加简单方法

    如下所示: <style type="text/css"> .favorite_icon{float:left; padding: 0 0 0 30px;} .favorite_label{float:left; width:950px;} .favorite_label h2{ border-bottom: medium none;height: 60px;padding: 0.8em 0 0 0px;} .favorite_title{height:60px;margi

随机推荐