JQuery implements the scroll bar always at the bottom

JQuery implements the scroll bar always at the bottom

I believe that sometimes when you are presenting some real-time data and the data volume is large, you cannot see the most effective data on the same page, so we need to move the scroll bar to the bottom, so that we can see the data and information we need most. Here, we can use windows ping for an obvious example. When we ping for a long time, more and more data will be generated and accumulated at this time, the new data is all behind, so it makes a great deal to keep the scroll bar at the bottom!

Let's take a look at the ping address-t in windows cmd. At this time, the ping will continue. At the beginning, the data may be relatively small, and you can see it on the same screen.

Latency + latency + 6117 K/o6zL + dLU1eK49sqxuvLO0sPH06a4w7 + 0tb21xMrHtdeyv9fuz + u/tLW9tcTK/latency = "http://www.2cto.com/uploadfile/Collfiles/20140806/20140806090855257.png" alt = "\">

As long as we put the scroll bar at the bottom, we can achieve our results !!! Well, let's not talk about it much. Let's take a look at the demo using textarea and div:

This is the simulated html element we need. The next step 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
')$("#testScroll2").scrollTop($("#testScroll2")[0].scrollHeight);count--;if(count == 0){clearInterval(timeBox);count = 1000;}},1000);}function stop(){count = 1000;clearInterval(timeBox);}

I have not dealt with the details in the demo. Please forgive me. You can understand the meaning. Here is a sentence:

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

Here, I would like to remind you that, if the effect does not come out, please note that the element is too good to be found!

Show the effect to everyone:

It's what we want! Thank you for your attention!