ウェブページを既にスクロールして下に移動しました

私は現在、ウェブサイトを読み込み、今まではスクロールさせる方法を考えています。例えばウェブページを既にスクロールして下に移動しました

...

CSS

body { 
height:2000px; 
} 

#red-box { 
position:absolute; 
width:100%; 
height:150px; 
background-color:red; 
} 

#blue-box { 
position:absolute; 
width:100%; 
height:500px; 
margin-top:150px; 
background-color:blue; 
}

HTML

<div id="red-box"></div> 
<div id="blue-box"></div>

は、私は、ウェブページがすでに十分にするために下にスクロールすることができますとにかくありred-box divはすでにページの上部に表示されていません。言い換えれば、ページが既にロードされているときに、赤いボックスを見るために150px（赤いボックスの高さ）までスクロールしているため、ユーザーは手動でスクロールし直す必要があります。、

は、私はいくつかのJavaScriptを試みたが、作業の並べ替えにリモートで近くに来ただけだった...

はJavaScript

$(window).scroll(function(event) { 
    window.scrollTo(0,150); 
});

しかし、それは私が必要なものを行っていないと実際には、ページ全体をスクロールできないようにします。これは150pxまでスクロールしますが、ユーザーが手動でページをスクロールしてからスクロールしてもスクロールしない場合に限ります。

私にはJavaScriptで最大ではないよ...私は私の問題は

$(window).scroll(function(event) { 
});

セクションに何かを持っているかもしれないと思います。私が思うように

window.scrollTo(0,150);

私が実際にやりたいことです。しかし、私はここで推測していると私はそれがまったく動作するように見えることはできません。

私はJSFiddleを作成して、少し明確に説明しました。

誰でも手伝ってもらえますか？

出典

2012-01-26 Flickdraw

不要なスクロールイベントごとにスクロール位置を0（、150）に設定しています。ページの読み込み時にのみ実行する必要があります。これをこのコードに変更します。

$(function() { 
    window.scrollTo(0,150); 
});

赤いボックスに完全にスクロールさせるには、このコードを使用します。 offset()メソッドは、ドキュメントに対する要素の上/左の位置を示します。

$(function(){ 
    window.scrollTo(0, $('#red-box').offset().top)); 
});

出典

2012-01-26 02:02:29 ShankarSangoli

ありがとうございました！今は完璧に動作しています！ – Flickdraw

それは自動jQueryオブジェクトをinstanciatingを必要とせずに実行されるようにあなたは、自己呼び出された匿名関数であなたのscrollTo()方法を包むことができます。

(function() { window.scrollTo(0,150); })();

それとも単純まだ、あなたの<body>タグにそれを置きます。

<body onload="window.scrollTo(0,150);">

出典

2012-01-26 02:03:23 65Fbef05

Javascriptが権利です。 Shankarが最初にどのライブラリを含めてもらう必要がある場合を除いて、既に投稿された提案はうまくいくはずです。

ライブラリを使用していますか？最初のコードスニペットの特殊文字は、ライブラリを表します。ドキュメント内のそのスクリプトの前にそれを含めなかった場合、そのスクリプトは機能しません。

はまた、ケースであなたは好奇心旺盛だった：

$(window)は、ライブラリーのスコープにウィンドウオブジェクトをもたらします。 .scrollはメソッドを示し、(function(event) { });はコールバックです。

出典

2012-01-26 02:05:17 OpenSorceress

情報ありがとうございます。私はそれをすべて把握するのにかなり苦労している。私はJQueryライブラリを含んでいますので、今はすべて動作しています！ – Flickdraw

ウェブページを既にスクロールして下に移動しました

答えて

関連する問題