Scroll to bottom of div using Javascript

Question

I created a window using html and javascript to display display log messages generated by my website. I want to set it up so that when the user opens the log window it auto scrolls to the bottom of the log messages. I've gotten it so that the log messages display correctly, but I am having trouble getting the auto scroll to work.

My html/javascript looks like this:

<body>
<div class="container-fluid">
  <div class="panel panel-default">
    <div class="panel-heading text-center">
      <h4 class="text-center">Log Messages</h4>
    </div>
    <div class="panel-body">
      <div class="content" id="logtext">
        <font face="courier">
          <span id="show" class='value'></span>
        </font>
      </div>
    </div>
  </div>
  <script language="javascript" type="text/javascript">
    function saveLogs(data){
      sessionStorage.setItem("logs",data.message);
    }
      $(document).ready(
        function() {
          setInterval(function() {
            Dajaxice.InterfaceApp.getLogs(saveLogs);
            var logs = sessionStorage.getItem("logs");
            document.querySelector('.content .value').innerText = logs;
            //I tried doing this and nothing happened.
            var objDiv = document.getElementById("logtext");
            objDiv.scrollTop = objDiv.scrollHeight;
          }, 1000);
        });
  </script>
</div>        
</body>

The call to dajaxice is just basically grabbing the last n lines of a log file that I have and then sending them to the js function I defined as saveLogs().

I've tried using some of the solutions given in similar questions but haven't had any luck getting them to work.

EDIT I tried setting it up like this:

   <div class="panel-body">
      <div class="content" id="logtext">
        <script language="javascript" type="text/javascript">
          document.getElementById('bottomspan').scrollIntoView();
        </script>
        <font face="courier">
          <span id="show" class='value'>
          </span>
          <div id='bottomspan'></div> 
        </font>
      </div>
    </div>
  </div>
  <script language="javascript" type="text/javascript">
    function saveLogs(data){
      sessionStorage.setItem("logs",data.message);
    }
      $(document).ready(
        // document.getElementById('bottomspan').scrollIntoView();
        function() {
          setInterval(function() {
            Dajaxice.InterfaceApp.getLogs(saveLogs);
            var logs = sessionStorage.getItem("logs");
            document.querySelector('.content .value').innerText = logs;
            var el = document.getElementById('bottomspan')
            el.scrollIntoView();
            var height = el.style.clientHeight
            window.scrollBy(0, height);
          },700);
        });
  </script>

This worked except every time the page refreshes with new messages it goes back to the bottom; this makes it hard to view older messages at the top. Is there a way to have it start at the bottom of the div but not force the user back down if they are looking at messages near the top?

Are you certain #logtext is the element that is scroll-able? — Coffee'd Up Hacker
– Coffee'd Up Hacker, Commented Aug 26, 2015 at 17:16

johnny 5 · Accepted Answer · 2015-08-26 18:30:06Z

5

Here Try:

document.getElementById('logtext').scrollIntoView();

EDIT

document.getElementById('bottomspan').scrollIntoView();

<font face="courier">
      <span id="show" class='value'> content.... 
           <span id='bottomspan'></span>
       </span>
</font>

EDIT

var el = document.getElementById('logtext')
el.scrollIntoView();
var height = el.style.clientHeight
window.scrollBy(0, height - window.innerHeight);

Edit to answer Edit

<script language="javascript" type="text/javascript">
    function saveLogs(data){
      sessionStorage.setItem("logs",data.message);
    }
    $(document).ready(
    function() {
      setInterval(function() {
        Dajaxice.InterfaceApp.getLogs(saveLogs);
        var logs = sessionStorage.getItem("logs");
        document.querySelector('.content .value').innerText = 
      },700);

        var el = document.getElementById('bottomspan')
        el.scrollIntoView();
        var height = el.style.clientHeight
        window.scrollBy(0, height);
    });

edited Aug 26, 2015 at 18:30

answered Aug 26, 2015 at 16:37

johnny 5

21.2k55 gold badges138 silver badges217 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

johnny 5 Over a year ago

Its also good because it's supported by all major browsers and doesn't require any additional libraries like jQuery

kdubs Over a year ago

I tried adding this under document.querySelector('.content .value').innerText = logs; but causes the scrolling to start at the top of the div every time the page is refreshed.

johnny 5 Over a year ago

is your span above or below the content or is the content in the span?

kdubs Over a year ago

The content is in the span, but I tried changing it to document.getElementById('show').scrollIntoView(); and it produced the same results.

johnny 5 Over a year ago

put an element in the span below the content and scroll to that

|

Nagarjuna Pamu · Accepted Answer · 2016-02-29 15:52:30Z

0

Just focus on the element to make the element visible.

<span id="feed_item" />

document.getElementById("feed_item").focus();

answered Feb 29, 2016 at 15:52

Nagarjuna Pamu

14.8k3 gold badges24 silver badges41 bronze badges

Collectives™ on Stack Overflow

Scroll to bottom of div using Javascript

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related