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?

you might want to look at this. stackoverflow.com/questions/8773405/… — user950658
– user950658, Commented Jan 7, 2012 at 23:23
Sweet! My only concern is that you still see the animation of the scroll. So each page I click on will load the first 500px and than scroll me to the content beneath it. That will get annoying to the user. Thoughts? — Hambone
– Hambone, Commented Jan 26, 2012 at 20:26

ThinkingStiff · Accepted Answer · 2012-01-11 19:23:46Z

54

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

edited Jan 11, 2012 at 19:23

answered Jan 8, 2012 at 19:54

ThinkingStiff

65.4k31 gold badges148 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jfritz42 Over a year ago

This solution works for me under IE but not Chrome. Any ideas?

jfritz42 Over a year ago

More info: it works in Chrome on the first page load but not on refresh. I think it's due to this bug: code.google.com/p/chromium/issues/detail?id=280460. If I hard-refresh the page it works, i.e. clicking in the URL bar and hitting enter. But soft-resets like the page refreshing or clicking the refresh button (or hitting F5) do not work.

Luca · Accepted Answer · 2012-01-07 23:28:02Z

3

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.

answered Jan 7, 2012 at 23:28

Luca

1,10010 silver badges4 bronze badges

4 Comments

Wex Over a year ago

For your first technique, how do you get it so it's down to the position of a specific element?

Hambone Over a year ago

Yes I have that about doing anchors but that is the last resort. I just can't tell how these guys did it unionstationdenver.com

Luca Over a year ago

@Wex in plain javascript you can find the position of an element inside a document like this: var topPosition = document.getElementById("myElement").offsetTop;

Luca Over a year ago

@Hambone you can see in this script link that they are using the scrollTo method of the window object. More info: scrollTo on mozilla

MohitGhodasara · Accepted Answer · 2018-12-23 05:56:04Z

3

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>

edited Dec 23, 2018 at 5:56

answered Nov 10, 2014 at 15:06

MohitGhodasara

2,7901 gold badge25 silver badges29 bronze badges

Comments

Sean H Jenkins · Accepted Answer · 2012-01-07 23:21:20Z

2

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

answered Jan 7, 2012 at 23:21

Sean H Jenkins

1,7553 gold badges22 silver badges29 bronze badges

1 Comment

Luca Over a year ago

scrollTop is applicable just to a DOM element, not to the document

NicerApp_WebOS · Accepted Answer · 2023-05-18 07:21:50Z

0

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

does the trick for me.

answered May 18, 2023 at 7:21

NicerApp_WebOS

277 bronze badges

Collectives™ on Stack Overflow

how to automatically scroll down a html page?

5 Answers 5

2 Comments

4 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related