function ScrollDiv() {    
    var ex = document.getElementById("calm");  
        ex.scrollTop = ex.scrollHeight;   
 }

obj.scrollTop：滚动条距离顶部的位置
obj.scrollHeight：流动区域的高度

给DIV添加滚动条
直接为div指定overflow属性为auto即可，但是必须指定div的高度，如下：
<div style="position:absolute; height:400px; overflow:auto">
</div>
如果要出现水平滚动条，则： overflow-x:auto
同理，垂直滚动条为： overflow-y:auto
如果该div被包含在其他对象例如td中，则位置可设为相对：position:relative
<HTML> 
<HEAD> 
<TITLE>测试表格内的滚动条</TITLE> 
</HEAD>

<BODY> 
<table>
  <tr>
    <td>表格内的滚动条:</td>
    <td>
      <div id="wins" 
        style="position:absolute;height:200;width:200;overflow:auto;background:#EEEEEE;"> 
        <p>pppppppppppppppppppppppppppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppppppppppppppppppppppppppp </p> 
        <p>ppppppppppppppppppppppppp </p> 
        <p>ppppppppppppppppppppppppp </p> 
        <p>ppppppppppppppppppppppppp </p> 
        <p>ppppppppppppppppppppppppp </p> 
        <p>ppppppppppppppppppppppppp </p> 
        <p>ppppppppppppppppppppppppp </p> 
        <p>ppppppppppppppppppppppppp </p> 
        <p>ppppppppppppppppppppppppp </p> 
        <p>ppppppppppppppppppppppppp </p> 
        <p>ppppppppppppppppppppppppp </p> 
      </div>
    </td>
  </tr>
  <tr>
    <td colspan="2" align="right">
      <span onmouseover='scrollb=setInterval("wins.scrollLeft-=10",100)' 
                 onmouseout=clearInterval(scrollb)>向左</span> 
            <span onmouseover='scrollb=setInterval("wins.scrollTop-=10",100)' 
                        onmouseout=clearInterval(scrollb)>向上</span>
      <span onmouseover='scrollb=setInterval("wins.scrollLeft+=10",100)' 
                 onmouseout=clearInterval(scrollb)>向右</span>
      <span onmouseover='scrollb=setInterval("wins.scrollTop+=10",100)' 
                 onmouseout=clearInterval(scrollb)>向下</span>
    </td>
  </tr>
</table>
</BODY> 
</HTML>

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JS控制DIV滚动条</title>

</head>

<script>

function scrollup()

{

document.getElementById('div1').scrollTop = document.getElementById('div1').scrollTop-25;

}

function scrolldown()

{

document.getElementById('div1').scrollTop = document.getElementById('div1').scrollTop+25;

}

function scrolltop()

{

document.getElementById('div1').scrollTop = 0;

}

function scrollbottom()

{

document.getElementById('div1').scrollTop = document.getElementById('div1').scrollHeight;

}

</script>

<style>

.div1

{

height:200px;

overflow-y:scroll;

width:400px;

border:solid 1px #ccc;

}

</style>

<body>

<div class="div1" id="div1"><br />

start<br />

<br /><br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

middle<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

end<br />

</div>

<input name="" type="button"  value="向上"/ onclick="scrollup();">

<input name="" type="button"  value="向下" onclick="scrolldown();"/>

<input name="" type="button"  value="顶"/ onclick="scrolltop();">

<input name="" type="button"  value="底" onclick="scrollbottom();"/>

</body>

</html>

如何定位到div滚动条的最底端的更多相关文章

  1. DIV设置滚动条在最底端

    网站聊天样式,无论添加什么内容div的滚动条都显示在最底端 将div添加滚动条,给div一定的高度 <div id='up' style='height:100px; width:400px;o ...

  2. Selenium2+python自动化26-js处理内嵌div滚动条

    前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦. 一.内嵌滚动条 1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相.

  3. FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条

    问题一:最简单的鼠标移过手变型的css要改了 cursor:pointer;/*FireFox(火狐)不支持cursor:hand*/ dw8下面自动出来的也没有hand这个属性了,标准的是point ...

  4. 2.24 js处理内嵌div滚动条

    2.24 js处理内嵌div滚动条 前言    前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦.一.内嵌滚动条    1.下面这张图 ...

  5. Selenium2学习（十八）-- js处理内嵌div滚动条

    前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦. 一.内嵌滚动条 1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相. ...

  6. Selenium2+python自动化26-js处理内嵌div滚动条【转载】

    前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦. 一.内嵌滚动条 1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相.

  7. div滚动条演示

    <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title& ...

  8. css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡

    pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...

  9. 【前端】webkit内核浏览器DIV滚动条样式修改和设置

    webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...

随机推荐

  1. android中Invalidate和postInvalidate的区别

    Android中实现view的更新有两组方法,一组是invalidate,另一组是postInvalidate,其中前者是在UI线程自身中使用,而后者在非UI线程中使用. Android提供了Inva ...

  2. [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.4.6

    Let $A$ and $B$ be two matrices (not necessarily of the same size). Relative to the lexicographicall ...

  3. spring+mybatis 多数据源整合

    <!-- 数据源配置 -->   <bean id="ds1" class="org.apache.commons.dbcp.BasicDataSour ...

  4. 扩展类加载器-------改变JAVA的父优先类加载顺序

    java的类加载机制默认情况下是采用委托模型:当加载某个类时JVM会首先尝试用当前类加载器的父类加载器加载该类,若父类加载器加载不到再由当前类加载器来加载,因此这种模型又叫做“父优先”模型. 但是在实 ...

  5. 【转】java list用法示例详解

    转自:http://www.jb51.net/article/45660.htm java中可变数组的原理就是不断的创建新的数组,将原数组加到新的数组中,下文对java list用法做了详解. Lis ...

  6. NGUI如何创建自己的精灵图集

    说实话其实很简单,但是在不知道的情况下真的不好弄啊. 1. 选择你要制作精灵图集的图片,可以选择多张 2. 提倡使用快捷键Alt + Shift + M 会有如下窗口弹出,也可以NGUI --> ...

  7. 【转】C++类中对同类对象private成员访问

    私有成员变量的概念,在脑海中的现象是,以private关键字声明,是类的实现部分,不对外公开,不能在对象外部访问对象的私有成员变量． 然而,在实现拷贝构造函数和赋值符函数时,在函数里利用对象直接访问了 ...

  8. 将COleDateTime类型数据转换成char *数据

    用OpenCV做多摄像头校准时间,在图像上显示时间信息,需求要将COleDateTime类型数据转换成char *数据 具体代码如下: 1: COleDateTime m_checkDate; 2: ...

  9. Java字符流读写数据的两种方式

    第一种方式:逐个字符进行读写操作(代码注释以及详细内容空闲补充) package IODemo; import java.io.FileReader; import java.io.FileWrite ...

  10. jquery.validate.js 应用示例

    今天发现了jQuery一个很强大的验证表单插件(jquery.validate.js 下载地址:http://bassistance.de/jquery-plugins/jquery-plugin-v ...