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 自动换行流式布局的RadioGroup

    效果图 用法 使用FlowRadioGroup代替RadioGroup 代码 import android.content.Context; import android.util.Attribute ...

  2. [转] python程序的调试方法

    qi09 原文 python程序的调试方法 本文讨论在没有方便的IDE工具可用的情况下,使用pdb调试python程序 源码例子 例如,有模拟税收计算的程序: #!/usr/bin/python de ...

  3. VTK三维重建(2)-根据脚部骨骼CT的三维重建和显示

    [效果演示] 根据脚部的骨骼CT扫描的照片,利用VTK完成读取和三维重建. [程序实现] void main () { vtkRenderer *aRenderer = vtkRenderer::Ne ...

  4. 五指cms筛选功能的实现：

    筛选功能的实现: $_POST['page_urlrule'] = 'tuan-{$pinpai}-{$renqun}-{$type}-{$price}-{$area}-{$tese}-{$st}-{ ...

  5. 《GettingThingsDone》--GTD学习笔记(一）-GTD理论

    利用春节假期阅读了<Getting Things Done>一书,下文整理了下阅读过程中做的读书笔记和心得. ==GTD理论== 一. 目的: 1. 收集需要处理的事情把它置于一个脱离大脑 ...

  6. 从代码都发布遇到的问题总结(C#调用非托管dll文件，部署项目) 转

    http://www.cnblogs.com/Purple_Xiapei/archive/2012/06/30/2570928.html

  7. BNUOJ-26476 Doorman 贪心

    题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=26476 题意:给一个字符序列,比如MWMMW,每次可以取前面两个中的一个,取出来后,取出来 ...

  8. AIM Tech Round 3 (Div. 2) (B C D E) (codeforces 709B 709C 709D 709E)

    rating又掉下去了.好不容易蓝了.... A..没读懂题,wa了好几次,明天问队友补上... B. Checkpoints 题意:一条直线上n个点x1,x2...xn,现在在位置a,求要经过任意n ...

  9. TCP/IP协议栈及OSI参考模型详解

    OSI参考模型 OSI RM:开放系统互连参考模型(open systeminterconnection reference model) OSI参考模型具有以下优点: 简化了相关的网络操作: 提供设 ...

  10. BroadcastReceiver学习笔记

    1.在代码中注册与在AndroiManifest.xml注册的区别 (a)在代码中注册可以控制注册与注销的时间.比如在onCreate-onDestory, onStart-onStop, onRes ...