Scrollbar focus on the bottom of the HTML div

Question

How do I make this scrollbar focus on the bottom of this div. Does JavaScript is necessary?

Simple chat box

Here: https://stackoverflow.com/questions/270612/scroll-to-bottom-of-div (and) https://stackoverflow.com/questions/18614301/keep-overflow-div-scrolled-to-bottom-unless-user-scrolls-up — Mohammed Joraid, Jul 21 '17 at 06:50
Possible duplicate of [Keep overflow div scrolled to bottom unless user scrolls up](https://stackoverflow.com/questions/18614301/keep-overflow-div-scrolled-to-bottom-unless-user-scrolls-up) — mfluehr, Jul 22 '19 at 14:21

score 4 · Accepted Answer · answered Jul 21 '17 at 06:52

4

You can try this:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

answered Jul 21 '17 at 06:52

Fotis Grigorakis

363
1
3
16

score 1 · Answer 2 · answered Jul 21 '17 at 06:53

1

  $("divname").animate({ scrollTop: $('divname').prop("scrollHeight")}, 0);

Does require Jquery

answered Jul 21 '17 at 06:53

Andrew Ward

109
2
9

score 0 · Answer 3 · answered Jul 22 '21 at 16:28

nice and simple just put this code somewhere in your script, preferably the top

     <script>
     var objDiv = document.getElementById("chatbox");
     if ( window.history.replaceState ) {
     objDiv.scrollTop = objDiv.scrollHeight;

      window.history.replaceState( null, null, 
      window.location.href );
      }
      </script>

score 0 · Answer 4 · answered Mar 15 '22 at 09:25

You can use Element.scrollIntoView()

Example:

document.getElementById('your_div').scrollIntoView()

Demo:

document.getElementById("my_div").scrollIntoView();

.page-body {
  overflow: auto;
  max-height: 200px;
}

<div class="page-body">
  <p>lorem ipsum</p>
  <p>lorem ipsum</p>
  <p>lorem ipsum</p>
  <p>lorem ipsum</p>
  <p>lorem ipsum</p>
  <p>lorem ipsum</p>
  <p>lorem ipsum</p>
  <p>lorem ipsum</p>
  <p>lorem ipsum</p>
  <p>lorem ipsum</p>
  <p>lorem ipsum</p>
  <p id="my_div">lorem ipsum</p>
</div>

Scrollbar focus on the bottom of the HTML div

4 Answers4