web-dev-qa-db-ja.com

htmlページを自動的にスクロールダウンする方法は？

このウェブサイトと同様に、500ピクセルほど下のホームページの後に各ページを開始しようとしています： http://unionstationdenver.com/

ホームページの後にページを表示すると、通知なしに自動的に下にスクロールされますが、上にスクロールして、注目のスライダーを再び楽しむことができます。

ScrolledHeightで遊んだことがありますが、それが私が必要なものだとは思いませんか????

基本的に、すべてのコンテンツページの一番上に機能セクションがありますが、上にスクロールするまでこのセクションは表示されません。何か助け？

javascripthtmlcssscrollheight
28
Hambone

これには.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;
}
42
ThinkingStiff

これを実現するには、2つの異なる手法を使用できます。

1つ目はjavascriptを使用する方法です。スクロール可能な要素のscrollTopプロパティを設定します（例：document.body.scrollTop = 1000;）。

2つ目は、ページ内の特定のIDを指すようにリンクを設定することです。

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

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

3
Luca

ここに純粋な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>
2
MohitGhodasara

つかいます document.scrollTop文書の位置を変更します。 scrollTopのdocumentを、サイトの注目セクションのbottomと等しく設定します

1
Sean H Jenkins