web-dev-qa-db-ja.com

scrollTop（）をChromeとFirefoxの両方で動作させることはできません

FirefoxとChromeの両方でscrollTop（）メソッドを動作させるのに問題があります。 $('body, html').scrollTop();を使用しましたが、Chromeでは機能しません。 Chromeでは$('body').scrollTop();のみが機能します。どんな考えでも大歓迎です。以下は私のコードです。

<!DOCTYPE html>
<html>
<head>
  <title>Demo</title>
  <style type="text/css">
  body {
    height: 2000px;
  }

  #light {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -400px;
    margin-top: -200px;
    width: 800px;
    height: 400px;
    background-color: blue;
    z-index:1002;
    overflow: auto;
  }
</style>
</head>

<body>
  <div id="light">
  </div>

<!-- Used the google jQuery link for ease of use in this example   -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $(window).scroll(function () {
        var offset = $('body, html').scrollTop();
        var view = $(window).height();
        var total = $(document).height();
        var percent = 1-(offset / (total - view));
        var widthFactor = 800*percent;
        var marginFactor = -(400*percent)

        if(percent > 0.33){
          $("#light").css({ "width" : widthFactor,
                      "margin-left" : marginFactor});
        };
      });
    });
  </script>
</body>
</html>
javascriptjquerygoogle-chromefirefoxscrolltop
21
Jonny Cerveza

代わりにドキュメントオブジェクトを使用します

$(document).scrollTop();
31
Dustin Blake

これと同じ問題がありました。私にとって最善の解決策は、windowでそれを行うことでした。

var offset = $(window).scrollTop();

これが機能するためには、body要素とhtml要素にheightを100%に設定することはできません。代わりにmin-heightを使用してください

編集：HTML要素はheight: 100%を使用できますが、bodyを完全な高さに伸ばす必要がある場合は、代わりにmin-height: 100%を使用する必要があります。それ以外の場合、scrollTopは常に「0」を返します

11
DoubleA

これを試してみてください、これはアニメーションで一番上にスクロールし、より効果的に見える

$("html, body").animate({ scrollTop: 0 }, 2000);

デモ Here

4
S. S. Rawat

複数のセレクターを使用すると、DOM要素の配列が返されます。この配列のゲッター関数の呼び出しは、Chrome（セッター関数は動作するはずです）で未定義のようです？

とにかく$('body').scrollTop() || $('html').scrollTop()を使用できます。

または、ジャスティンの答えで述べたように、$（ドキュメント）だけです。

2
mrmoment

このソリューションを使用しました：

window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0)

この回答では別のスレッドで提供されています： https://stackoverflow.com/a/3346236

JQueryを使用する必要はありません。私にとってはうまく機能します。

1
Anders

Body、htmlタグから高さスタイルを削除します。 bodyの下のメインdivにIDを追加します。 #contentは次のスクリプトを使用します。前に引用したように、ブラウザーコンソールで$(document).scrollTop();を実行し、0ではなく値を返すことを確認します。

$('body, html').animate({
  scrollTop: $('#content ').offset().top
}, 1000);
0
ehtulhaq

idを使用してスクロール要素のこの単純なJavaScriptコードを試してください

document.getElementById("id").scrollTop=0;
0
user4963716