Scroll window without a jump (javascript or hashtag)

Question

I want a solution either using a hashtag pointing at the name of an anchor tag or javascript.

The javascript I am currently using looks like this window.scroll(0, 20000);. The problem is that this causes the window jerk down when a user arrives on the page.

I know there are jQuery animations that make this movement more gradual. However, what I want is something that makes the movement of the window imperceptible to the user. I want to be as if the user landed at the bottom of the page.

Answer 1

The problem you face is that you wish to go to the bottom of your page which has not loaded yet. I would consider loading the page in a hidden format then show it when it has all loaded and after scrolling the user at the location you want. Use the focus or scroll to methods.

Take a look at the filament group website.

http://filamentgroup.com/

they hide the page with a loading screen until it is ready.

This way there is no jerk.

Hope this helps.

Answer 2

In loop it works, if the page is fully loaded and shown:

for(var n=0;n<1000;n++) window.scrollBy(0,20);

(Notice that 20*1000=20000, which was the original place to scroll.)

Answer 3

Teemu's answer doesn't seem to work for me (it goes straight to the bottom, making the loop with scrollBy stepping invisible), because it doesn't implement a delay.

If you mean to animate from top to bottom of the page in a 1000ms, try something more like this:

for (var n = 0; n < 1000; n += 1) {
    setTimeout(function () {
        window.scrollBy(0, document.height / 1000);
    }, n);
}

That will give a 1 second (1000ms) animation, scrolling to the bottom in roughly 1000 steps.