Smooth auto scrolling with javascript

Question

I am trying to execute some code on my webpage to automatically scroll after the page loads. I used the Javascript function to perform automatic scrolling, and I called my function when the page loads, but the page still does not scroll smoothly! Is there a way to automatically scroll my page?

Here is my Javascript function:

function pageScroll() { window.scrollBy(0,50); // horizontal and vertical scroll increments scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds } 

Answer 1

This is not smooth because you increase the scroll speed by 50 every 100 milliseconds.

change this and the amount you scroll to a smaller number so that the function works with the illusion that it is much smoother.

slow down to make it faster or slower.

 function pageScroll() { window.scrollBy(0,1); scrolldelay = setTimeout(pageScroll,10); } 

will turn out to be much smoother, try it;)

Answer 2

Try using jQuery and this code:

 $(document).ready(function(){ $('body,html').animate({scrollTop: 156}, 800); }); 

156 - scroll position to (px), on top of the page.
800 - scroll time (ms)

Answer 3

You might want to see the source code for the jQuery ScrollTo plugin , which scrolls smoothly. Or maybe just use the plugin instead of rolling your own function.

Answer 4

Smoothly running animation depends on the client machine. No matter how fair you code, you will never be satisfied with how your animation works in the Ram Ram system.

Here's how you can scroll with jQuery:

 $(document).scrollTop("50"); 

You can also try the AutoScroll Plugin .

Answer 5

you can use jfunc function for this. use the jFunc_ScrollPageDown and jFunc_ScrollPageUp . http://jfunc.com/jFunc-Functions.aspx .

Answer 6

Since you marked the question as "jquery", why don't you try something like .animate() ? This particular jquery function is designed to seamlessly animate all kinds of properties, including CSS numeric properties as well as scroll position.