Scroll automatically inside of a div

Question

Hello i have a problem with my website. I want to make a JavaScript function which scrolls down to an object with the id #important. Usually i just modify the link to page.html#important. but because the object is at the bottom of a div which has a scrollbar itself that won't work.

Code:

<script language="javascript" type="text/javascript">
    var timeout = setInterval(reloadChat, 10);  
    function reloadChat() {
        $("#chat").load("chat.php");
    }
    reloadChat();
</script>

and in chat.php i fetch rows from my database in which the last row is being displayed in a <div id="lastmessage"></div> which i want to scroll down to

Thanks in advance

Need to provide code of what you've tried and what part you are stuck on. — Leeish, Apr 13 '18 at 19:46
agreed with @Leeish . This would be helpful for us to provide you the solution. — Ankit Pandey, Apr 13 '18 at 20:00

score 1 · Answer 1 · answered Apr 13 '18 at 20:09

Is .scrollIntoView() something like you want? https://www.w3schools.com/jsref/met_element_scrollintoview.asp

Or maybe this can help? https://stackoverflow.com/a/270628/4335288

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

score 0 · Accepted Answer · answered Apr 13 '18 at 20:42

0

I would use Element.scrollIntoView() with behavior set to smooth.

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

window.onload = function(e){ 
  var element = document.getElementById('second');
  element.scrollIntoView({ behavior: 'smooth' });
}

#first {
  height: 2000px;
  background-color: lightgreen;
}

#second {
  height: 2000px;
  background-color: lightpink;
}

#third {
  height: 2000px;
  background-color: lightblue;
}

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
  </body>
 </html>

behavior: 'smooth' will quickly provide good UX.

You can choose when to call element.scrollIntoView({ behavior: 'smooth' });. It will scroll to that DOM element when called.

answered Apr 13 '18 at 20:42

agm1984

15,500
6
89
113

If i try that i get this error from chrome: `Uncaught TypeError: Cannot read property 'scrollIntoView' of null at window.onload ((index):149)`, maybe because of the AJAX? – Apr 13 '18 at 20:52
It says scrollIntoView of null because it didn't find an element with the ID you specified. It was caused by this: `var element = document.getElementById('second');`. Replace `second` with the ID of the div you want to scroll to. – agm1984 Apr 13 '18 at 21:24
Check the sample code I showed, again. You will get it solved up when you get the correct element saved in there. – agm1984 Apr 13 '18 at 21:25
i had done that, i think it's because the AJAX hasn't loaded at the window.onload trigger – Apr 13 '18 at 21:31
Yes if the DOM element isn't in the DOM yet, that could cause something like that. Try reading this real quick and see if it helps you figure it out: https://stackoverflow.com/questions/588040/window-onload-vs-document-onload – agm1984 Apr 13 '18 at 21:35
With AJAX, also be aware of the callback function. The code that calls the scroll should be inside there. That could cause it also. – agm1984 Apr 13 '18 at 21:36
is there also something which lets it trigger the first time the AJAX is loaded? – Apr 13 '18 at 21:48
I'm not sure because I don't know what you have or dont have, try this: https://www.w3schools.com/xml/ajax_intro.asp – agm1984 Apr 13 '18 at 22:21
the ajax is added to the question and the page i'm loading is just a MySQLi fetch from db php script – Apr 14 '18 at 06:11
1

I added it inside this code as ScrollDown() and now it works perfectly! thanks! `$(document).ajaxComplete(function() { ScrollDown(); $(document).unbind("ajaxComplete"); });` – Apr 14 '18 at 10:07

Scroll automatically inside of a div

2 Answers2