Scroll down X pixels slowly in Java Script

Question

I'm trying to make something in HTML for school that scrolls down to the next section when the down arrow is pressed.

Currently, the site scrolls down the number of pixels outputted by ((window.innerHeight+(window.innerHeight*0.1))+1).

Here is my Java Script code:

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

The code makes scrolls down way too fast. Is there some way to scroll down slowly the same number of pixels in pure Java Script?

Thanks for any ideas.

you have an `else if` without an initial `if`. Are you sure your code works? — Ahmad, Mar 02 '20 at 11:41
Sorry. That statement was after one doing the same thing binding the right arrow, which I took out in this question for simplicity. I just forgot to replace the else if with if when writing this question. I edited the question and it works now. — Andereoo, Mar 02 '20 at 11:45
Please create a minimal, concrete, and verifiable example, because your code above simply does not work: you have forgotten to use `e.preventDefault`. Moreover, you should be comparing against a number instead of a string. — Terry, Mar 02 '20 at 11:46
One way would be to do a while loop until the scroll reaches the bottom of the page. Inside the while loop, scroll by fixed amount and put a few milliseconds sleep between each scroll or sleep after two/three scrolls [just like you would use a mouse to scroll]. — Parisana Ng, Mar 02 '20 at 11:49
I just fixed that. I'm new to JS. Also, @Terry the code seems to work for me? — Andereoo, Mar 02 '20 at 11:53

score 1 · Accepted Answer · answered Mar 02 '20 at 11:53

// 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)
    }
  })
}

For anyone else running into this problem: when calling the doScrolling() function, you can replace ```doScrolling(ypixelsvalue, duration)``` with ```doScrolling(window.pageYOffset+ypixelsvalue, duration)``` to scroll down a certain number of pixels instead of scrolling to that point. Also, in some websites, depending on the css settings, ```window.pageYOffset``` will not work. Instead use ```document.documentElement.scrollTop || document.body.scrollTop``` — Andereoo, Mar 02 '20 at 21:31

Scroll down X pixels slowly in Java Script

1 Answers1