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

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