jQuery实现滚动条一直处于最底部

标签：jquery   dom   html   scroll   滚动条至于底部   

相信大家有时候在展示一些实时数据展示并且数据量很大的时候，因为无法在同一页面看到最有效的数据，所以我们需要将滚动条至于底部，以便我们看到最需要的数据和信息；这里很明显的例子那拿windows的ping来说吧，当我们长ping的时候，这时候数据会越来越多，而且还是累加的，新数据又全部在后面，所以这个时候让滚动条一直处于底部就大有作为了！

大伙可以看一下，在windows的cmd中执行ping 地址 -t，这时候就会一直ping，刚开始的时候，数据可能比较小，同一屏就能看到

但时间一长，数据就越来越多，同一屏根本就无法看到，而且最有效的数据都在最底部，所以这个时候我们应该看到的是底部最想看到的数据

只要我们把滚动条处于底部，就达到我们的效果了！！！好啦，不多说了，先给大家看一下小实例，是以textarea和div来做的demo：

<textarea id="testScroll1" style="width:300px; height: 200px;border: 1px #ccc solid; resize:none;"></textarea>
<div id="testScroll2" style="width:300px; height: 200px;border: 1px #ccc solid; overflow-y: scroll;float: left;"></div>
<input type="button" value="Start" onclick="start();">
<input type="button" value="Stop" onclick="stop();">

这是我们需要的那个模拟的html元素，接下来才是关键：

var count = 1000;
function start(){
	$("#testScroll1").html('');
	$("#testScroll2").html('');
	timeBox = setInterval(function(){
		$("#testScroll1").append('number:['+count+']--->I Love You\n')
		var scrollTop = $("#testScroll1")[0].scrollHeight;
		$("#testScroll1").scrollTop(scrollTop);
		$("#testScroll2").append('number:['+count+']--->I Love You<br/>')
		$("#testScroll2").scrollTop($("#testScroll2")[0].scrollHeight);
		count--;
		if(count == 0){
			clearInterval(timeBox);
			count = 1000;
		}
	},1000);
}

function stop(){
	count = 1000;
	clearInterval(timeBox);
}

$("#dom_id").scrollTop($("#dom_id")[0].scrollHeight);

展示效果给大伙儿看看：

是我们想要的效果吧！谢谢大家的关注！

jQuery实现滚动条一直处于最底部,布布扣,bubuko.com

jQuery实现滚动条一直处于最底部

标签：jquery   dom   html   scroll   滚动条至于底部   

原文地址：http://blog.csdn.net/luo201227/article/details/38385003