2011-10-19 7 views
7

に0を返し、私はそれがロードを完了したと私はこのコードを使用していた後、ページがスクロールされたかどうかを確認します。どうしてこれなの?scrollTopスプライトは()クロム

+0

状況は何ですか?訪問者が#hashタグであなたのページに来たかどうか確認していますか?または、ドキュメントの読み込みが完了する前に訪問者がスクロールしたかどうか確認していますか?または両方? –

+1

私はビューにスクロールされた要素のアニメーションを実行しています。しかし、もしあなたがページを下にスクロールし、リフレッシュすると。再ロードされたページは自動的に前のスクロールポイントにスクロールされます(プレリフレッシュ)ので、ページの要素がスクロールしてアニメーションが開始されたことを確認するウィンドウのスクロール位置を知りたい場合は –

答えて

2

$(window).scrollTop()は、ウィンドウがスクロール可能でない場合は0を返します。

0

ページの下部にテキストとリンクがあるページで、次のコードを試してみてください。あなたはそれが間オフセット、ページがスクロールされていないため、0を得るためにあなたの場合には正常であり、私のボタン

$(document).ready(function() { 
     alert($(window).scrollTop()); // first load if you did not scroll = 0 
     $("#button").click(function() { alert($(window).scrollTop()); }); 
     // hitting the button that is located on bottom of page 
     // - i had to scroll the page = xxx (68 in may case) 
    }); 

が表示されるまでページのスクロールを行うために十分なテキストや空白行を持っていることを忘れないでくださいあなたの位置とページの上部は0です。

私はChrome、FF6、IE9で試しました。 私は助けてくれることを願っています。

+1

.scrollTop )問題ではありません..もしあなたがページを下にスクロールし、リフレッシュすると。ページはポイントuからスクロールして(プレリフレッシュ)..それは私が知りたいと思う位置です。 FFでこれを行うと、corect値が出力されます。 Chrome 14.0では0を返します。 –

4

実際、FirefoxはdomReadyまたはwindow.onloadの$(window).scrollTop()に対して0を返さない唯一のブラウザです。クロム、SafariやIE domReady上のスクロールバーの正しい位置を取得するための唯一の安全な方法0すべてのリターンは、上記の他の回答で述べたように、ある、以下のようにウィンドウのスクロールイベントのイベントハンドラを設定するには:

$(document).ready(function(){ 
    $(window).scroll(function() { 
     console.log($(window).scrollTop()); 
     $(window).unbind('scroll'); 
    }); 
}); 
+0

私は本当に人々があなたの答えをダウン投票した理由を理解していません。これは本当に機能します。さらに、Chromeがスクロールイベントを2回発生させることがわかりました。最初は通常のページ読み込み時であり、前の位置にスクロールする場合は2回目です(たとえば、ページを読み込むためにF5を押した後)。 – Fleshgrinder

2

クロムは、DOMがロードされると、事前リフレッシュスクロール位置を復元します。したがって、準備完了イベントではなくスクロールイベントでscrollTopを取得することができます。

2

また、私はdocument上または'html,body'に、windowでそれを使用するかどうか、scrollTop()は常にChromeで0を返された問題を抱えていました。私は最終的にCSSが問題だったことが判明:

html, body { 
    height: 100%; 
    overflow-x: hidden; 
} 

あなたは、このコードの一部を削除することができますし、それが再び動作するため、実際には、私は正確な理由を知りません。奇妙なしかし、問題解決;)

+0

ありがとうございました!それは確かに奇妙です! Safariで作業しましたが、クロムには対応していません。これを私のCSSに追加した後、両方のブラウザで動作します。 – bbnn

0

私は同じ問題を抱えていたが、ドキュメント宣言を追加することにより、固定しまっ:

<!DOCTYPE html> 
関連する問題