how to fix the scrollbar always at the bottom of a div?

Question

I am doing a simple chat application,I want to fix the scrollbar of a div always at the bottom.just like this When loading the index page the scrollbar must be at the bottom Here is my style.css ``` body{ font: 0.9em monospace; } .messages{ border: 1px solid #ccc; width: 250px; height: 210px; padding: 10px; overflow-y:scroll; } .message{ color: slategrey; } .message p{ margin: 5px 0; } .entry{ width: 260px; height: 40px; padding: 5px; margin-top: 5px; font: 1em fantasy; } ``` Here is my index.php ```

<…

Accepted Answer

Try this jquery :

```
$(".messages").animate({ scrollTop: $(document).height() }, "slow");
  return false;
```

and here is the fiddle : http://jsfiddle.net/EX6vs/

or refers to the height of the element (many agree is the right way), as below:

```
$(".messages").animate({ scrollTop: $(this).height() }, "slow");
  return false;
```

and here is the fiddle : http://jsfiddle.net/69vpnyu1/

how to fix the scrollbar always at the bottom of a div?

Solution

Problem