Scroll in Increments with JavaScript

John on March 17, 2021

To scroll in increments with JavaScript set scrollTop to the value of scrollTop plus the amount you want to increment by in pixels.

To demonstrate this, let's create a function that scrolls down the contents of an HTML div element by 10 pixels on each button click.

<div id="box">
  <div class="content">
    Some text.
  </div>
</div>

<button id="button">Scroll Down</button>

#box {
  height: 200px;
  width: 300px;
  overflow: scroll;
  width: 300px;
}

.content {
  width: 100%;
  margin-top: 100px;
  height: 400px;
}

document.getElementById('button').addEventListener('click', function(){

  var element = document.getElementById('box');

  element.scrollTop = element.scrollTop + 10;
});

Smooth Scroll Incrementally with jQuery

Here is another example, demonstrating smooth scrolling in increments using the jQuery animate() function.

$('#button').on('click', function() {

  var div = $('#box');

  div.animate({
    scrollTop: div[0].scrollTop + 10
  }, 500);
});