jquery implements scroll bar always at the bottom

I believe that we sometimes show some real-time data display and the amount of data is very large, because it is not possible to see the most effective data on the same page, so we need to put the scroll bar to the bottom, so that we see the most needed data and information; Here's an obvious example, take the ping for Windows, When we are long ping, this time the data will be more and more, and still accumulate, the new data is all in the back, so the scroll bar has been at the bottom of a lot!

Guys can look at the Windows cmd in the ping address-T, this time will always ping, at first, the data may be smaller, the same screen can be seen

But the time is long, the data is more and more, the same screen can not see at all, and the most effective data are at the bottom, so this time we should see the bottom of the most want to see the data

As long as we put the scroll bar at the bottom, we can achieve the effect!!! OK, not much to say, first show you a small instance, is a textarea and div to do the 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 ();" >

This is the simulated HTML element that we need, and the next is the key:

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);}

The details of the demo is not handled, but also please forgive me, you understand the meaning of the line, summed up is a sentence:

$ ("#dom_id"). ScrollTop ($ ("#dom_id") [0].scrollheight];

Here to remind you, if the effect does not come out, please note that the element is super-find the right!

Show the effect to the folks to see:

It's the effect we want! Thank you for your attention!