JQuery implements the scroll bar always at the bottom. jquery implements the scroll bar

JQuery implements the scroll bar always at the bottom. jquery implements the scroll bar

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.

However, after a long period of time, more and more data will be displayed on the same screen, and the most effective data is at the bottom. Therefore, we should see the most desired data at the bottom.

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:

<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 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<br/>')$("#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!

How does jquery keep the scroll bar at the bottom by default?

Write in ready Method
$ ('# Content'). scrollTop ($ (' # content') [0]. scrollHeight );

How does jquery control the bottom of the div scroll bar?

$ (). ScrollTop ();