Reputation: 4049

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.

Upvotes: 277

Answers (15)

Andyroo

Reputation: 9

If you're looking to simply scroll to the bottom of a div, then just use an huge out of range integer, no css or height reference is needed.

$("#ScrollabledDiv").scrollTop(200000)

Upvotes: 0

Chris Aelbrecht

Reputation: 2091

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

Upvotes: 0

chandan singh

Reputation: 11

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

Upvotes: -1

Nghi

Reputation: 1

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

Upvotes: 0

laaksom

Reputation: 2210

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

Upvotes: 3

Manish Nagdewani

Reputation: 597

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

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

Upvotes: -1

Mike Todd

Reputation: 7377

The other solutions here don't actually work for divs with lots of content -- it "maxes out" scrolling down to the height of the div (instead of the height of the content of the div). So they'll work, unless you have more than double the div's height in content inside of it.

Here is the correct version:

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

or jQuery 1.6+ version:

var d = $('#div1');
d.scrollTop(d.prop("scrollHeight"));

Or animated:

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

Upvotes: 716

dpineda

Reputation: 2449

for animate in jquery (version > 2.0)

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

Upvotes: 5

James Blachford

Reputation: 121

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

Upvotes: 12

Alexis Pigeon

Reputation: 7512

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.

Upvotes: 28

patspam

Reputation: 2199

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

Upvotes: 74

Lal Kokkat

Reputation: 61

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

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

Upvotes: 6

jenking

Reputation: 51

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

Upvotes: 5

Ram

Reputation: 144689

try this:

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

Upvotes: 7

Chords

Reputation: 6860

$(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.

Upvotes: 16

Scroll to bottom of Div on page load (jQuery)

Answers (15)

Related Questions