Прокрутите вниз X пикселей медленно в Java Скрипт

Question

Я пытаюсь сделать что-то в HTML для школы, которая прокручивает вниз до следующего раздела, когда нажимается стрелка вниз.

В настоящее время сайт прокручивает количество пикселей, выводимых с помощью ((window.innerHeight+(window.innerHeight*0.1))+1).

Вот мой Java Код сценария:

document.onkeydown = checkKey;
function checkKey(e) {
  e = e || window.event;
  if (e.keyCode == '40') {
    document.getElementById("mainbody").scrollBy({
      top: ((window.innerHeight+(window.innerHeight*0.1))+1),
      behavior: 'smooth'
    });
  }
}

Код делает прокрутки слишком быстро Есть ли способ прокрутить вниз медленно такое же количество пикселей в чистом Java Script?

Спасибо за любые идеи.

Answer 1

// elementY: is the vertical offset of the whole page
// duration: how long do you want the scroll last
// for example: doScrolling(0, 300) will scroll to the very beginning of page
// in 300ms
function doScrolling(elementY, duration) {
  const startingY = window.pageYOffset
  const diff = elementY - startingY
  let start

  // Bootstrap our animation - it will get called right before next frame shall be rendered.
  window.requestAnimationFrame(function step(timestamp) {
    if (!start) start = timestamp
    // Elapsed milliseconds since start of scrolling.
    const time = timestamp - start
    // Get percent of completion in range [0, 1].
    const percent = Math.min(time / duration, 1)

    window.scrollTo(0, startingY + diff * percent)

    // Proceed with animation as long as we wanted it to.
    if (time < duration) {
      window.requestAnimationFrame(step)
    }
  })
}