CODEWITHSUNDEEP
javascripthtmlcssscrollheight
Hambone
Hambone

Reputation: 321

how to automatically scroll down a html page?

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?

Upvotes: 32

Views: 269078

Answers (5)

Rene Veerman
Rene Veerman

Reputation: 27

<?php
        echo '<script type="text/javascript">document.scrollTop = 99999999;</script>';
        ob_flush();
        ob_end_flush();
        flush();
        ob_start();
?>

does the trick for me.

Upvotes: 0

MohitGhodasara
MohitGhodasara

Reputation: 2732

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>

Upvotes: 3

ThinkingStiff
ThinkingStiff

Reputation: 65341

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;
}

Upvotes: 54

Luca
Luca

Reputation: 1100

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.

Upvotes: 3

Sean H Jenkins
Sean H Jenkins

Reputation: 1780

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

Upvotes: 2

Related Questions