How to change the scroll speed when automatically scrolling to a position?

Question

When a user clicks this button, I execute this:

const myDiv = document.getElementsByClassName('someClass')[0];
myDiv.scrollTop = myDiv.scrollHeight;

But it jumps so fast, it takes some time for the user to re-orient themselves in the page. Is there any way to scroll to the new position more gradually (without jQuery)?

Answer 1

I don't remember where i found this function from but it works :)

function scrollTo(element, to, duration) {
  if (duration <= 0) return;
  var difference = to - element.scrollTop;
  var perTick = difference / duration * 16;
  var turn = element.scrollTop < to;
  setTimeout(function () {
    element.scrollTop = element.scrollTop + perTick;
    if ((turn && element.scrollTop >= to) || (!turn && element.scrollTop <= to)) {
      element.scrollTop = to;
      return;
    }
    scrollTo(element, to, duration - 16);
  }, 16);
};

const myDiv = document.getElementsByClassName('someClass')[0];
scrollTo(myDiv ,myDiv.scrollHeight,400);