Loading content scrolled all the way to the bottom

Question

I am working on adding simple IM functionality to my website using PHP and MySQL. I have the messages in an embedded iframe so that I can have them refresh every so often without having to refresh and redraw the whole page. The problem is that I want to have the messages load in a format similar to texts or other IM's where newest is on the bottom, and then you scroll up to get old messages. That all works fine, except that I cannot get the page to load with the most recent text in view.

How do I force the content of the iframe to scroll to the bottom after it is finished loading?

function scrollBottom(){
  var element = document.getElementById("messageFrame");
  element.scrollTop = element.scrollHeight;
}

p, h5 {
  display: inline-block;
  float: left; 
}
p {
  width: 90%;
}
h5{
  width: 10%;
}
section *{
  display: inline-block;
}
section h5 {
  font-weight: bold;
  font-size: 16px;
  width: auto;
  margin-left: 5px;
}
section h6 { 
  width: 10%;
  display: inline-block;
  float: right;
  margin: 0;
}
section p {
  text-align: center;
}
.row {
  padding: 15px;
  width: 100%;
  margin: 0;
}
.messageContent {
  width: 90%;
}
.row section{
  width: 100%;
}

<div class="container-fluid">
        <div class="row" style="overflow: auto;" onload="scrollBottom();">
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here<br />
</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">test</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">test</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">You should see this without scrolling</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">You should see this without scrolling</p>
          </div>
          <h6>You should see this without scrolling</h6>
        </section>
     </div>
	</div>

In a perfect world this content would load and we would see the last line at the bottom of the box without having to scroll. As you can see I attempted to use the element.scrollheight function, but it isn't working.

Answer 1

by using jquery you could do

$(".messageContent:last-child")[0].scrollIntoView()

$(".messageContent:last-child") = Jquery selector.

[0] first element of selector result.

.scrollintoview: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Good Call below, onload is only valid for the body, as javascript is exucuted inplace (as the renderer gets the content) you can just add a script tag after your div, when usiong jQuery be sure that the library is loaded before your function call.

Answer 2

look, first thing first, you cannot call an onload from a div so best would be to put the code after the div

Now that you can actually call the code try using jquery or something else to verify as I am sure this code is correct, try it in your browser.

function scrollBottom(){
   alert("this does not work"); 
   var element = document.getElementById("messageFrame");
   element.scrollTop = element.scrollHeight;
 }

p, h5 {
  display: inline-block;
  float: left; 
}
p {
  width: 90%;
}
h5{
  width: 10%;
}
section *{
  display: inline-block;
}
section h5 {
  font-weight: bold;
  font-size: 16px;
  width: auto;
  margin-left: 5px;
}
section h6 { 
  width: 10%;
  display: inline-block;
  float: right;
  margin: 0;
}
section p {
  text-align: center;
}
.row {
  padding: 15px;
  width: 100%;
  margin: 0;
}
.messageContent {
  width: 90%;
}
.row section{
  width: 100%;
}

<div class="container-fluid">
        <div class="row" id="messageFrame" style="overflow: none;" onload="scrollBottom()">
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here<br />
</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">test</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">test</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">You should see this without scrolling</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">You should see this without scrolling</p>
          </div>
          <h6>You should see this without scrolling</h6>

        </section>
     </div>
             <script type="text/javascript">
                alert("this works");
                var element = document.getElementById("messageFrame");
                element.scrollTop = element.scrollHeight;
            </script>
	</div>