Changing the scroll position programmatically

programming web dev
1

Is there a way to change scrollTop(), or any way to scroll the document at all? I don’t want to scroll to where a certain element is, but rather just increment the scroll value.

Thanks in advance.

2

scroll down:

document.getElementById( ‘scroll_container’).scrollTop = document.getElementById( ‘scroll_container’).scrollTop + 100;

3

Thanks for replying.

I’ve already tried that and it turns out scrollTop is read-only. I’ve found a jQuery plugin called ScrollTo that should work.

Cheers.

4

I use this myself and it works fine.
the scrollto scrolls an element into view, you said you didn’t want that…

5

Could you please put it into better context? It doesn’t work for me at all. Using jQuery I’ve tried this:

$(document).ready(function() {
  console.log(document.getElementById('container').scrollTop);
  document.getElementById('container').scrollTop = document.getElementById('container').scrollTop + 100;
  console.log(document.getElementById('container').scrollTop);
});

It simply returns 0 and 0 again after the supposed scroll down. “container” is the main div and the html is full of dummy text to get scrollbars. The CSS looks like this:

display: block;
margin-left: auto;
margin-right: auto;
width: 50%;

Correct, I don’t want to scroll to an element, but ScrollTo has the option to scroll to absolute positions such as 512px and such. I’d like to avoid using a plugin, but I don’t see any other way (I’m using jQuery for other reasons though).