'Scroll to bottom of Div on page load (jQuery)

I have a div on my page:

<div id='div1' style='overflow:scroll;overflow-x:hidden;max-height:200px;'></div>

How can I make the div scroll to the bottom of the div?? Not the page, just the DIV.

jqueryhtml


Solution 1:[1]

All the answers that I can see here, including the currently "accepted" one, is actually wrong in that they set:

scrollTop = scrollHeight

Whereas the correct approach is to set:

scrollTop = scrollHeight - clientHeight

In other words:

$('#div1').scrollTop($('#div1')[0].scrollHeight - $('#div1')[0].clientHeight);

Or animated:

$("#div1").animate({
  scrollTop: $('#div1')[0].scrollHeight - $('#div1')[0].clientHeight
}, 1000);

Solution 2:[2]

UPDATE : see Mike Todd's solution for a complete answer.

$("#div1").animate({ scrollTop: $('#div1').height()}, 1000);

if you want it to be animated (over 1000 milliseconds).

$('#div1').scrollTop($('#div1').height())

if you want it instantaneous.

Solution 3:[3]

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

This grabs the height of the page and scrolls it down once the window has loaded. Change the 1000 to whatever you need to do it faster/slower once the page is ready.

Solution 4:[4]

None of these worked for me, I have a message system inside a web app that's similar to Facebook messenger and wanted the messages to appear at the bottom of a div.

This worked a treat, basic Javascript.

window.onload=function () {
     var objDiv = document.getElementById("MyDivElement");
     objDiv.scrollTop = objDiv.scrollHeight;
}

Solution 5:[5]

try this:

$('#div1').scrollTop( $('#div1').height() )

Solution 6:[6]

The following will work. Please note [0] and scrollHeight

$("#myDiv").animate({ scrollTop: $("#myDiv")[0].scrollHeight }, 1000);

Solution 7:[7]

Scroll window to the bottom of target div.

function scrollToBottom(id){
  div_height = $("#"+id).height();
  div_offset = $("#"+id).offset().top;
  window_height = $(window).height();
  $('html,body').animate({
    scrollTop: div_offset-window_height+div_height
  },'slow');
}

scrollToBottom('call_div_id');

Solution 8:[8]

for animate in jquery (version > 2.0)

var d = $('#div1');
d.animate({ scrollTop: d.prop('scrollHeight') }, 1000);

Solution 9:[9]

I'm working in a legacy codebase trying to migrate to Vue.

In my specific situation (scrollable div wrapped in a bootstrap modal), a v-if showed new content, which I wanted the page to scroll down to. In order to get this behaviour to work, I had to wait for vue to finish re-rendering, and then use jQuery to scroll to the bottom of the modal.

So...

this.$nextTick(function() {
    $('#thing')[0].scrollTop = $('#thing')[0].scrollHeight;
})

Solution 10:[10]

You can use below code to scroll to bottom of div on page load.

$(document).ready(function(){
  $('div').scrollTop($('div').scrollHeight);
});

Solution 11:[11]

You can check scrollHeight and clientHeight with scrollTop to scroll to bottom of div like code below.

$('#div').scroll(function (event) {
  if ((parseInt($('#div')[0].scrollHeight) - parseInt(this.clientHeight)) == parseInt($('#div').scrollTop())) 
  {
    console.log("this is scroll bottom of div");
  }
  
});

Solution 12:[12]

$(document).ready(function() {
    let width = $(window).width();
    let element = $("#YourId");
    let positionFromTop = element.offset().top + element.prop("scrollHeight");
    $("html, body").animate({
        scrollTop: Math.abs($(window).height() - positionFromTop)
    }, 500);
});

Solution 13:[13]

When page is load then scroll is max value .

This is message box when user send message then always show latest chat in down so that scroll value is always is maxium. 

$('#message').scrollTop($('#message')[0].scrollHeight);

see image

Related Questions