smooth auto scroll by using javascript

Question

I am trying to implement some code on my web page to auto-scroll after loading the page. I used a Javascript function to perform auto-scrolling, and I called my function when the page loads, but the page is still not scrolling smoothly! Is there any way to auto scroll my page smoothly?

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

It's not smooth because you've got the scroll incrementing by 50 every 100 milliseconds.

change this and the amount you are scrolling by to a smaller number to have the function run with the illusion of being much more 'smooth'.

turn down the speed amount to make this faster or slower.

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

will appear to be much smoother, try it ;)

Answer 2

Try to use jQuery, and this code:

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

156 - position scroll to (px), from top of page.
800 - scroll duration (ms)

Answer 3

You might want to look at the source code for the jQuery ScrollTo plug-in, which scrolls smoothly. Or maybe even just use the plug-in instead of rolling you own function.

Answer 4

Smoothly running animations depends on the clients machine. No matter how fairly you code, you will never be satisfied the way your animation runs on a 128 MB Ram system.

Here is how you can scroll using jQuery:

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

You might also want to try out AutoScroll Plugin.

Answer 5

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

Answer 6

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