I'm trying to start each page after the homepage about 500px down, similar to this website:
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?
4 Answers
You can use .scrollIntoView() for this. It will bring a specific element into the viewport.
Example:
document.getElementById( 'bottom' ).scrollIntoView();
Demo:
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;
}
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.
here is the example using Pure JavaScript
function scrollpage() {
function f()
{
window.scrollTo(0,i);
if(status==0) {
i=i+40;
if(i>=Height){ status=1; }
} else {
i=i-40;
if(i<=1){ status=0; } // if you don't want continue scroll then remove this line
}
setTimeout( f, 0.01 );
}f();
}
var Height=document.documentElement.scrollHeight;
var i=1,j=Height,status=0;
scrollpage();
</script><style type="text/css">
#top { border: 1px solid black; height: 20000px; }
#bottom { border: 1px solid red; }
</style><div id="top">top</div>
<div id="bottom">bottom</div>Use document.scrollTop to change the position of the document. Set the scrollTop of the document equal to the bottom of the featured section of your site
