滚动条自动下滑到底部代码,JS代码库,德仔网

代码语言

代码分类

【JS】滚动条自动下滑到底部

作者:shooke1 / 发布于2014/5/20/ 1210

聊天室开发中广泛使用，后追加的内容，显示出来就需要滚动条自动滚动到最底部。例子中用到了jquery也用到了js原生代码，所以使用时最好引入js


	<!DOCTYPE html>
	<html>
	<head>
	 <meta charset="utf-8">
	 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
	 <meta name="apple-mobile-web-app-capable" content="yes">
	 <meta name="apple-mobile-web-app-status-bar-style" content="black">
	 <title>滚动条到底部</title>

	 <style type="text/css">
	 .content{width:200px;height:100px; overflow: auto}
	 </style>

	 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	 <script type="text/javascript" charset="utf-8">
	 $(function(){
	 $('#add').click(function(){
	 $("#content").append("Hello");
	 //原生代码实现滚动条自动到最底部
	 lct = document.getElementById('content');
	 lct.scrollTop=Math.max(0,lct.scrollHeight-lct.offsetHeight);
	 })
	 })
	 </script>
	</head>
	<body>
	 <div id="content" class="content">dfd</div>
	 <input type="button" name="add" id="add" value="add" />
	</body>
	</html>

试试其它关键字

　自动下滑　

同语言下

可能有用的

shooke1贡献的其它代码(5)