自动滚动到某个位置时如何更改滚动速度？

Question

当用户单击此按钮时，我将执行以下操作：

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

但是它跳得太快了，用户需要花费一些时间来重新定向页面。 有什么方法可以更逐步地滚动到新位置（没有jQuery）？

Answer 1

我不记得我是从哪里找到这个功能的，但是它起作用了:)

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);