Default scrollbar position

Question

I'm building a chat application in which I need the scrollbar to be at the bottom of the chat window (last message) on page load.

How do I accomplish this (Using jQuery or otherwise)?

Here's the chat window div:

<div id="ccwindow">

      <div class="bubble me">Hey!</div>
      <div class="bubble you">Hello</div>
      <div class="bubble me">I saw your post. Want to buy the book. Are you an XYZ University?</div>
      <div class="bubble you">Yes, sophomore year.</div>
      <div class="bubble me">Great!</div>
      <div class="bubble you">I'll buy it. Can you get it to school tomorrow?</div>
      <div class="bubble me">Sure. See you tomorrow!</div>

 </div>

possible duplicate of [Scroll to bottom of Div on page load (jQuery)](http://stackoverflow.com/questions/10503606/scroll-to-bottom-of-div-on-page-load-jquery) — Vidya Sagar, Jun 22 '15 at 13:20
@Sagar I think he wants to reposition the scroll bar, not scrolling to the bottom — chris97ong, Jun 22 '15 at 13:21
@chris97ong i understood that he needs the position of the scroll bar to be at the bottom of the page on page load from this line "I need the scrollbar to be at the bottom of the chat window on page load". pl correct me if i am wrong. — Vidya Sagar, Jun 22 '15 at 13:25

score 2 · Accepted Answer · answered Jun 22 '15 at 13:21

2

Here you go: http://jsfiddle.net/vtep7Lf1/

$("document").ready(function() {
  $("#ccwindow").animate({ scrollTop: $("#ccwindow").height() }, "slow");
  return false;
});

answered Jun 22 '15 at 13:21

JBux

1,394
8
17

Works like a charm! Thanks mate! – Harsh Gupta Jun 22 '15 at 13:31

NightOwlPrgmr · Answer 2 · 2015-06-22T13:32:00.553

0

You could also use this:

$(window).load(function() {
    $("#ccwindow").animate({ scrollTop: $(document).height() - $(window).height() }, 1000);
});

Note:

Using the .load rather than .ready will take images into account.

edited Jun 22 '15 at 13:32

answered Jun 22 '15 at 13:25

NightOwlPrgmr

1,322
3
21
31

Default scrollbar position

2 Answers2