1

codepen: https://codepen.io/Varo/pen/gbZzgr

I am trying to scroll down the chat window to the latest chat message in the code. I tried using jquery-scrollTo plugin to do this,

$('.chat').scrollTo('max', 500);

But it is yielding nothing. Can someone please tell me what I'm doing wrong or what can be done to achieve this?

dripto
  • 570
  • 1
  • 7
  • 17
  • add this `window.scrollTo(0,document.body.scrollHeight);`, the link at codepen https://codepen.io/hdl881127/pen/BRQROW – Dalin Huang Apr 25 '17 at 19:16
  • 1
    Possible duplicate of [Scroll Automatically to the Bottom of the Page](http://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page) – Dalin Huang Apr 25 '17 at 19:17

2 Answers2

1

The best way to do this, is to create the newest message as a node, then using this.

node.scrollIntoView();

Heres an example on how to make a node.

var node = document.createElement('div');
node.innerHTML = 'bla bla bla';
container.appendChild(node);

Please comment if you have any questions.

1

Here are the working link and the code

https://codepen.io/hossmen/pen/PmbjmO

var time = document.getElementsByTagName('time');
var timeList= [...time];
var lastElement = timeList[time.length-1];
lastElement.scrollIntoView({block:"end", behavior:"smooth"});
Rick
  • 1,035
  • 10
  • 18