30

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?

favo
  • 5,302
  • 8
  • 40
  • 59
Hambone
  • 301
  • 1
  • 3
  • 3
  • you might want to look at this. http://stackoverflow.com/questions/8773405/how-to-auto-scroll-to-target-div-with-jquery/8773563#8773563 –  Jan 07 '12 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 Jan 26 '12 at 20:26

4 Answers4

49

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;
}
ThinkingStiff
  • 62,391
  • 29
  • 139
  • 237
  • This solution works for me under IE but not Chrome. Any ideas? – jfritz42 Oct 29 '13 at 17:33
  • 1
    More info: it works in Chrome on the first page load but not on refresh. I think it's due to this bug: https://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. – jfritz42 Oct 29 '13 at 18:13
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>
MohitGhodasara
  • 1,272
  • 18
  • 26
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.

Luca
  • 1,014
  • 10
  • 4
  • For your first technique, how do you get it so it's down to the position of a specific element? – Wex Jan 08 '12 at 00:29
  • Yes I have that about doing anchors but that is the last resort. I just can't tell how these guys did it http://unionstationdenver.com/ – Hambone Jan 26 '12 at 20:29
  • 1
    @Wex in plain javascript you can find the position of an element inside a document like this: `var topPosition = document.getElementById("myElement").offsetTop;` – Luca Jan 28 '12 at 12:07
  • @Hambone you can see in this script [link](http://unionstationdenver.com/lib/js/550.js) that they are using the scrollTo method of the window object. More info: [scrollTo on mozilla](https://developer.mozilla.org/en/DOM/window.scrollTo) – Luca Jan 28 '12 at 12:13
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

Sean H Jenkins
  • 1,728
  • 3
  • 19
  • 28