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, Aug 26 '15 at 17:16

johnny 5 · Answer 1 · 2015-08-26T18:30:06.817

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 '15 at 18:30

answered Aug 26 '15 at 16:37

johnny 5

19,893
50
121
195

Its also good because it's supported by all major browsers and doesn't require any additional libraries like jQuery – johnny 5 Aug 26 '15 at 16:45
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. – kdubs Aug 26 '15 at 16:49
is your span above or below the content or is the content in the span? – johnny 5 Aug 26 '15 at 16:53
The content is in the span, but I tried changing it to `document.getElementById('show').scrollIntoView();` and it produced the same results. – kdubs Aug 26 '15 at 16:57
put an element in the span below the content and scroll to that – johnny 5 Aug 26 '15 at 16:58
Doing that over wrote all of my log messages. – kdubs Aug 26 '15 at 17:08
The new ddit should scroll the top into view and then it will get offset by the height of the element – johnny 5 Aug 26 '15 at 17:24
yeah thats because you set the interval just remove that from there or do you need it to happen after the ajax call succeeds please remember to mark your question as resolved once compete :0 – johnny 5 Aug 26 '15 at 18:27

SSYSS · Answer 2 · 2015-08-26T17:22:32.363

1

Try using

var $objDiv = $("#logtext");
$objDiv.scrollTop( $objDiv.height() );

Your script works fine: http://jsfiddle.net/b1tf63yd/1/

edited Aug 26 '15 at 17:22

answered Aug 26 '15 at 16:41

SSYSS

31
5

Nothing happened when I added these lines. – kdubs Aug 26 '15 at 16:52
This solution requires JQuery – johnny 5 Aug 26 '15 at 17:06

score 0 · Answer 3 · answered Feb 29 '16 at 15:52

0

Just focus on the element to make the element visible.

<span id="feed_item" />

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

answered Feb 29 '16 at 15:52

Nagarjuna Pamu

14,737
3
22
40

Scroll to bottom of div using Javascript

3 Answers3