HTMLページを自動的にスクロールする方法は？

Question

私はこのウェブサイトに似ホームページに関する500pxなどダウンし、後に各ページを開始しようとしている：http://unionstationdenver.com/

あなたは、ホームページの後にページを表示したとき、あなたは予告なしに自動的にスクロールダウンしているが、あなたがよりできるわかりますおすすめのスライダーをもう一度表示するには上にスクロールします。

私はscrolledHeightでプレイしましたが、私はそれが私の必要と考えるものではありませんか？

基本的には、すべてのコンテンツページの上にあるおすすめセクションがありますが、上にスクロールするまではこのセクションを表示できません。どんな助け？

Answer 1

document.scrollTopを使用して、ドキュメントの位置を変更します。 documentのscrollTopをサイトのおすすめセクションのbottomに設定してください。

Answer 2

これを実現するには、2つの方法があります。

最初はjavascriptを使用しています：スクロール可能な要素のscrollTopプロパティを設定してください（例：document.body.scrollTop = 1000;）。

ページの特定のIDを指すようにリンクを設定しています。

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

ターゲットページにそのIDがある場合、そのページは自動的にスクロールされます。

Answer 3

これには.scrollIntoView()を使用できます。特定の要素がビューポートに表示されます。

例：

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

デモ：http://jsfiddle.net/ThinkingStiff/DG8yR/

スクリプト：

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 4

function scrollpage() { \t \t 
 
\t function f() 
 
\t { 
 
\t \t window.scrollTo(0,i); 
 
\t \t if(status==0) { 
 
    \t \t \t i=i+40; 
 
\t \t \t if(i>=Height){ \t status=1; } 
 
\t \t } else { 
 
\t \t \t i=i-40; 
 
\t \t \t if(i<=1){ \t status=0; } // if you don't want continue scroll then remove this line 
 
\t \t } 
 
\t setTimeout(f, 0.01); 
 
\t }f(); 
 
} 
 
var Height=document.documentElement.scrollHeight; 
 
var i=1,j=Height,status=0; 
 
scrollpage(); 
 
</script>

<style type="text/css"> 
 

 
\t #top { border: 1px solid black; height: 20000px; } 
 
\t #bottom { border: 1px solid red; } 
 

 
</style>

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