<!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>jQuery Scroller</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

</head>

<body>

<div id="myDiv" style="width: 500px; height: 100px; overflow: auto; border: 1px solid black;"></div>

<input type="text" id="myTextInput" />

<input type="button" value="Send" id="postButton" />

<div id="info"/>

<script type="text/javascript">

 $(document).ready(function(){

  $('#postButton').click(function(){

   $('#myDiv').append($('#myTextInput').val() + '<br/>');

   $('#myTextInput').val('');

   $("#myDiv").animate({ scrollTop: $("#myDiv")[0].scrollHeight - $('#myDiv').height() }, 3000);

  });

 });

</script>

</body>

</html>

jquery 让滚动条处于div底部的更多相关文章

  1. jQuery——检测滚动条是否到达底部

    一.jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数:$(document).height()    获取整个页面的高度:$(window).height()    ...

  2. jquery判断滚动条是否到底部

    clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight ...

  3. jQuery判断滚动条滚到页面底部脚本

    原文地址 http://www.111cn.net/wy/jquery/61741.htm

  4. JQuery 判断滚动条是否到底部

    BottomJumpPage: function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).he ...

  5. jQuery检测滚动条(scroll)是否到达底部

    一.jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数: $(document).height()    获取整个页面的高度 $(window).height()   ...

  6. jQuery 滚动条 滚动到底部（下拉到底部） 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

  7. jQuery判断滚动条是上滚还是下滚，且是否到达底部或顶部

    jQuery判断滚动条是上滚还是下滚,且是否到达底部或顶部:http://www.haorooms.com/post/jquery_scroll_upanddown //滚动条滚动加载更多内容 //判 ...

  8. 一款回到顶部的 jQuery 插件，支持 Div 中的滚动条回到顶部

    前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...

  9. Jquery 判断滚动条到达顶部或底部

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. SRS文档

    1什么是用例? 在介始用例方法之前,我们首先来看一下传统的需求表述方式-"软件需求规约"(Software Requirement Specification).传统的软件需求规约 ...

  2. 1st贝塞尔函数的使用

    x=-100:0.1:100; y1=besselj(7,x);y2=besselj(10,x);y3=besselj(20,x);y4=besselj(40,x);y5=besselj(60,x); ...

  3. gnuplot使用，操作，保存等教程

    gnuplot绘制图像并保存 对于在Linux下工作的人,如果你经常要画一些二维图和简单的三维图的话,那么,gnuplot无疑是一个非常好的选择,不仅图形漂亮,而且操作简单.当然如果需要质量更高的三维 ...

  4. js继承相关

    这几天看到一篇文章详解Javascript的继承实现,发现js还是很深奥的,比如call.apply.prototype这些,问起来我也能说的头头是道的,但是看到一些复杂的代码有的时候还是会迷糊,所以 ...

  5. Windows平台下PHP环境搭建

    在Windows平台上搭建PHP的开发环境可以下载WAMP(Windows.Apache.MySQL.PHP的首字母缩写)集成化安装包.这样就不需要单独安装Apache.MySQL和PHP了. 这款软 ...

  6. C#使用QQ邮箱发送邮件

    首先要开通QQ邮箱的STMP服务.QQ邮箱——设置——账户——开启SMTP服务. 需要引用: using System.Net; using System.Net.Mail; using System ...

  7. mysql 数据库迁移

    公司的视频转码服务 使用mysql作为 任务队列, 其中mysql 是我们自己维护的 单例. 后来应业务部门建议,我们计划将现有的mysql 向dba进行迁移,以下记录一下 数据库迁移过程中的东西. ...

  8. Javascript 右移0位的作用

    Javascript 中右移0位可以用来快速去掉小数,关于位移运算的定义: 右移运算是将一个二进制位的操作数按指定移动的位数向右移动,移出位被丢弃,左边移出的空位或者一律补0,或者补符号位. 实际看下 ...

  9. frame与frame之间怎么用jquery传值

    frame与frame之间如何用jquery传值 使用jquery操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...< ...

  10. Linux虚拟机安装（CentOS 6.5，图文详解，需要自查）

    Linux虚拟机的安装(图文详解) 下篇会接续Hadoop集群安装(以此为基础) 一.安装准备 VMWorkstation.linux系统镜像(以下以CentOS6.5为例) 二.安装过程详解 关闭防 ...