<!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. Metronic学习之路

    简介 1.Metronic 是一个基于 Bootstrap 3.* 设计的自适应.多用途的管理后台模板. 2.HTML页面开头都有着下面一段代码来检测 ie 浏览器的版本,并根据不同版本应用特定的类到 ...

  2. 数据结构《17》---- 自动补齐之《二》----Ternary Search Tree

    一. 序言 上一篇文章中,给出了 trie 树的一个实现.可以看到,trie 树有一个巨大的弊病,内存占用过大. 本文给出另一种数据结构来解决上述问题---- Ternary Search Tree ...

  3. 【转】C#线程同步示例

    using System; using System.Threading; // 银行帐户类 class Account { int balance;                         ...

  4. centos6虚拟机复制后修改网卡

    方法1: 使用vmware创建centos6.4虚拟机, 创建完成后复制该虚拟机, 打开复制的虚拟机发现网卡名字是eth1,而网卡配置文件为eth0,mac地址变了 这时修改网卡配置文件, 删除uui ...

  5. ArcGIS二次开发实践— — 遍历ToolBox中的工具！

    在AO中,打开“文件A”的基本流程是: 1.创建对应“文件A”类型的WorkspaceFactory: 2.用WorkspaceFactory创建“文件A”的Workspace,Workspace可以 ...

  6. [转]jq选择器

    jQuery-强大的jQuery选择器 (详解)[转] 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 ...

  7. 第三次作业 GIThub操作

    一.Git 客户端操作 1.在project文件夹初始化一个repository 2.添加并提交readme.txt 3.修改并查看状态 4.多次修改并提交 5.创建分支mv1并checkout至该分 ...

  8. 安装XAMPP后APACHE不能启动解决方法

    自己的xampp中的apache启动失败,在网上找到了一篇文章,感觉不错,原文如下: Xampp的获得和安装都十分简单,你只要到以下网址: http://www.apachefriends.org/z ...

  9. LinQ递归查询

    --由父项递归下级 with cte(refid,pid,zname,code) as (--父项 union all --递归结果集中的下级 select t.refid,t.pid,t.zname ...

  10. PHPnow在win8下安装失败的解决办法

    提示: 安装服务[ Apache_pn ]失败,可能原因如下:1.服务名已存在,请卸载或使用不同服务名.2.非管理员权限,不能操作Window NT服务. 解决方案: 搜索:命令提示符   , 右键以 ...