how to automatically scroll down a html page?

Question

I'm trying to start each page after the homepage about 500px down, similar to this website: http://unionstationdenver.com/

You'll notice when viewing pages after the homepage, you're automatically scrolled down without notice but you can than scroll up to revel the featured slider again.

I've played with scrolledHeight but I dont think that is what I need????

Basically I have a featured section that is on top of all my content pages, but you shouldn't be able to see this section until you scroll up. Any help?

Answer 1

You can use .scrollIntoView() for this. It will bring a specific element into the viewport.

Example:

document.getElementById( 'bottom' ).scrollIntoView(); 

Demo: http://jsfiddle.net/ThinkingStiff/DG8yR/

Script:

function top() {     document.getElementById( 'top' ).scrollIntoView();     };  function bottom() {     document.getElementById( 'bottom' ).scrollIntoView();     window.setTimeout( function () { top(); }, 2000 ); };  bottom(); 

HTML:

<div id="top">top</div> <div id="bottom">bottom</div> 

CSS:

#top {     border: 1px solid black;     height: 3000px; }  #bottom {     border: 1px solid red; } 

Answer 2

You can use two different techniques to achieve this.

The first one is with javascript: set the scrollTop property of the scrollable element (e.g. document.body.scrollTop = 1000;).

The second is setting the link to point to a specific id in the page e.g.

<a href="mypage.html#sectionOne">section one</a> 

Then if in your target page you'll have that ID the page will be scrolled automatically.