Div scroll to the bottom on load

Question

How can I make a div scroll to the bottom on load using jQuery? I have a DIV with a preset width and height and a jQuery function that gets content from MySQL (using a php script) and prints it to that div. The div has a scrollbar, hidden btw, and I want that div to be scrolled to the bottom on load. Is there a way to do this?

HTML:

<div id="showContent"></div>

jQuery:

var auto_refresh = setInterval( function()
{
$('#showContent').load('show.php').fadeIn('fast');
}, 500);

show.php contains a while function, it works well.

CSS:

    #showContent {
    height: 250px;
    margin: 10px;
    margin-bottom: 3px;
    overflow: auto;
    padding: 5px;
    width: 300px;
    overflow: auto;
}

Yesterday I was playing with a similar situation - small div, long table with scrolling. So I just added a single row to the bottom of the table and put in a dummy then later added "$('#starthere').focus();". Seems to work. Let's see what others might say. — TimSPQR, Jul 04 '13 at 09:29
...but it doesn't work. I've posted my CSS to understand my div's action style. — Sergiu, Jul 04 '13 at 09:48
This is something you're going to have to do on the server side before the data are posted in the load statement. The CSS on client side won't really matter. Can you post the code for server side? — TimSPQR, Jul 04 '13 at 10:06
And I found this old post on the forum that may be a simpler solution: http://stackoverflow.com/questions/10503606/scroll-to-bottom-of-div-on-page-load-jquery — TimSPQR, Jul 04 '13 at 10:08

score 1 · Answer 1 · answered Jul 04 '13 at 10:10

1

Add extra div with specific id to showContent div and using javascript scrollTo function scroll to that div which will work

answered Jul 04 '13 at 10:10

Gnanz

1,833
5
24
51

score 1 · Answer 2 · answered Dec 29 '17 at 09:45

You can use some callback with load event that would trigger after load so that you can calculate height of that element and then on basis of that you can use scrollTo() function for scroll down.Like this:

$('div').load('some_url', function(responseText, textStatus, XMLHttpRequest){
  console.log("Get content length");
  //Here you can use some calculation and then use scrollTo 
});

Div scroll to the bottom on load

2 Answers2