scroll bar is not at bottom of div when page loads

Question

I want to get scroll bar at bottom of div as soon as page loads but it is not working

My design:

<div class="panel-body" id="dvMsgBody" style="padding: 0px;">
    <div id="dvMessage" class="col-lg-12" style="height: 500px; overflow: auto; margin: 0px; padding: 0px; width: 100%;">
    </div>
</div>

My jQuery:

//not working
{
    $("#divChatWindow").find('#dvMsgBody').find('#dvMessage').scrollTop($('#dvMessage')[0].scrollHeight);
}


//not working
{
    $("#divChatWindow").find('#dvMsgBody').find('#dvMessage').animate({ scrollTop: $('#dvMessage')[0].scrollHeight }, 1000);
}

//not working
{
    $('#dvMessage').scrollTop($('#dvMessage')[0].scrollHeight);
}

What do you mean you want a scroll bar at the bottom of the div? Could you provide a [jsfiddle](http://www.jsfiddle.net) of what you're current implementation looks like — asdf, Sep 08 '15 at 07:18
Tip: IDs should be unique, therefore a single selector like `$('#dvMessage')` would suffice. — emerson.marini, Sep 08 '15 at 07:41

Alex · Answer 1 · 2015-09-08T07:46:45.770

0

Working fiddle

(function($) {
  $(window).load(function() {
    $('#dvMessage').stop().animate({ scrollTop: $('#dvMessage').prop('scrollHeight') }, 1000);
  });
})(jQuery);

edited Sep 08 '15 at 07:46

answered Sep 08 '15 at 07:41

Alex

9,911
5
33
52

You don't need to wrap the `window.load()` event within a `document.ready()` one. You should use one or another instead. – emerson.marini Sep 08 '15 at 07:42
@MelanciaUK http://stackoverflow.com/questions/3259496/jquery-document-ready-vs-self-calling-anonymous-function – Alex Sep 08 '15 at 07:44
Sorry. I've seen what's not there - `$(function())`. :) – emerson.marini Sep 08 '15 at 07:53

score 0 · Answer 2 · answered Sep 08 '15 at 07:46

I have create a simply jsFiddle for you : https://jsfiddle.net/azp9vjyk/

jQuery

$(function()
  {
    $('.scroll').animate({ scrollTop: $('.scroll').prop('scrollHeight') }, 5000);
});

Html

<div class="scroll">Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. </div>

scroll bar is not at bottom of div when page loads

2 Answers2