jQuery scrollTopはChromeでは機能しませんが、Firefoxでは機能します

80

scrollTopjQueryで上に移動する関数を使用しましたが、奇妙なことに、変更を加えた後、SafariとChromeで「スムーズアニメーションスクロール」が機能しなくなりました（スムーズアニメーションなしのスクロール）。

しかし、Firefoxではまだスムーズに機能しています。何が悪いのでしょうか？

これが私が使用したjQuery関数です。

jQuery：

$('a#gotop').click(function() {
    $("html").animate({ scrollTop: 0 }, "slow");
    //alert('Animation complete.');
    //return false;
});

HTML

<a id="gotop" href="#">Go Top </a>

CSS

#gotop {
      cursor: pointer;
      position: relative;
      float: right;
      right: 20px;
      /*top:0px;*/
}
jquery  jquery-ui  jquery-selectors 
— マジュ
ソース
1
— jAndy 2010年
@jAndy、scrollTop有効なcssプロパティではないがデモで機能するのはなぜだろうと思っていましたか？...それに関する情報やリンクを共有できますか？
— Reigel 2010年
@Reigel：認めざるを得ません、できません。私はそれをブラックボックスのように使用しますが、jQueryは実際にはクロスブラウザーを正規化します。
— jAndy 2010年
@jAndy -大丈夫...私は使用することをお勧めではないでしょう推測scrollTop..かかわらず、私はまだ掘ってる...アニメイトCSSマップのプロパティ内
— Reigel
— ミスター

回答:

106

使ってみてください $("html,body").animate({ scrollTop: 0 }, "slow");

これは私にとってクロームで機能します。

— アーロン・ハルン
ソース
はい。ありがとう。シンプルで時間の節約。
— マジュ2010年
3
これには副作用があります。コールバック関数が2回呼び出されます（要素ごとに1回）。これに対する賢い回避策はありますか？
— bububaba 2012年
8
置く：if（this.nodeName == "BODY"）{return; }コールバック関数の先頭にあるため、html要素からのコールバックのみが通過します。また、html要素のnodeName属性は常に大文字であることに注意してください。
— ボビー
1
これを指摘してくれてありがとう@Bobby！一度起動してすべてのブラウザで機能するコールバック関数を使用する場合に非常に便利です。TA！
— セバスチャン
1
すべてのブラウザで動作するには、$（ "body、html"）を使用する必要がありました。
— トムキンケイド2017
57

CSShtml要素に次のoverflowマークアップがある場合、scrollTopは機能しません。

html {
    overflow-x: hidden;
    overflow-y: hidden;
}

scrollTopスクロールできるようにするには、マークアップを変更overflowしてhtml要素からマークアップを削除し、要素に追加しbodyます。 

body { 
    overflow-x: hidden;
    overflow-y: hidden;
}
— user2971963
ソース
4
それはおそらく4年以上前のものですが、それでも私の問題の解決策
— でした
1
@LeandroこれはChrome41のソリューションです。質問に答える答えを思いとどまらせないでください。
— worc 2015年
1
@Leandroこの男は私の命を救った！それは私のために働いた
— liltof 2015年
なんてこった、これは私にとって2つの問題を解決した。多くの多くの感謝<3
— Osamah Aldoaiss
私は...なぜそれが機能しなかったのかを理解しようと5時間以上費やしました。どうもありがとうございました！
— PepperAddict
15

'document'でscrollTop（）を使用すると、両方のブラウザで機能します。

$(document).scrollTop();

...「html」または「body」の代わりに。それ以外の場合は、両方のブラウザで同時に機能しません。

— アレハンドロデルリオ
ソース
'html'と 'body'が機能しなかったときに、ドキュメントが機能しました。ありがとう：）
— ConorLuddy 2014年
5

私はこれをChrome、Firefox、Safariで成功裏に使用しました。IEではまだテストできていません。

if($(document).scrollTop() !=0){
    $('html, body').animate({ scrollTop: 0 }, 'fast');
}

「if」ステートメントの理由は、ユーザーがサイトの上部ですべて準備ができているかどうかを確認するためです。もしそうなら、アニメーションをしないでください。そうすれば、画面の解像度についてそれほど心配する必要はありません。

$(document).scrollTopieの代わりに使用する理由。$('html,body')Chromeは何らかの理由で常に0を返す原因です。

— スティーブン
ソース
3

Chromeでのスクロールでも同じ問題が発生しました。そのため、このコード行をスタイルファイルから削除しました。

html{height:100%;}
body{height:100%;}

今、私はスクロールで遊ぶことができ、それは機能します： 

var pos = 500;
$("html,body").animate({ scrollTop: pos }, "slow");
— 羊
ソース
ワオ。これで私の問題は完全に修正されました！scrollTopをまったく機能させることができませんでしたが、高さを削除すると、本体とhtml要素から100％、うまく機能しました。ありがとう、ありがとう、ありがとう。
— agon024 2016
@ agon024、私も幸せです;）。本当に私は数時間のテストの後にこの解決策を見つけて、あなたのような誰かのためにここに書いてみました。
— RAM
2

本体をスクロールして、機能するかどうかを確認します。

function getScrollableRoot() {
    var body = document.body;
    var prev = body.scrollTop;
    body.scrollTop++;
    if (body.scrollTop === prev) {
        return document.documentElement;
    } else {
        body.scrollTop--;
        return body;
    }
}


$(getScrollableRoot()).animate({ scrollTop: 0 }, "slow");

これは$("html, body").animate、2つではなく、1つのアニメーションのみを使用するよりも効率的です。したがって、2つではなく、1つのコールバックのみが発生します。

— NVI
ソース
良くやった！とても助かりました！
— gogachinchaladze 2017年
1

多分あなたは意味します top: 0

$('a#gotop').click(function() {
  $("html").animate({ top: 0 }, "slow", function() { 
                                           alert('Animation complete.'); });
  //return false;
});

アニメーションドキュメントから

.animate（プロパティ、[期間]、[イージング]、[コールバック]）
プロパティアニメーションが移動するCSSプロパティのマップ。
..。

または$(window).scrollTop()？

$('a#gotop').click(function() {
  $("html").animate({ top: $(window).scrollTop() }, "slow", function() { 
                                                              alert('Animation complete.'); });
  //return false;
});
— レイゲル
ソース
それでもアニメーションは機能していません。簡単な解決策が見つかりました。「html」だけでなく「body、html」または「html、body」を使用する必要がありました。
— マジュ2010年
1 
// if we are not already in top then see if browser needs html or body as selector
var obj = $('html').scrollTop() !== 0 ? 'html' : 'body';

// then proper delegate using on, with following line:
$(obj).animate({ scrollTop: 0 }, "slow");

ただし、最善のアプローチは、ネイティブAPIのみを使用してIDをビューポートにスクロールすることです（とにかく上にスクロールするため、これは外側のdivになります）。

document.getElementById('wrapperIDhere').scrollIntoView(true);
— Maar10
ソース
この最善のアプローチは、Chromeでのoverflow-x: hidden;onの問題をhtml回避します。ただし、スクロールはスムーズではありません.animate()。
— ジミー
0

この問題を解決するためのより良い方法は、次のような関数を使用することです。

function scrollToTop(callback, q) {

    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, function() {
            console.log('html scroll');
            callback(q)
        });
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, function() {
            console.log('body scroll');
            callback(q)
        });
        return;
    }

    callback(q);
}

これはすべてのブラウザで機能し、FireFoxが2回上にスクロールするのを防ぎます（これは、承認された回答を使用した場合に発生します- $("html,body").animate({ scrollTop: 0 }, "slow");）。

— チャックルバット
ソース
0

Chrome、Firefox、Edgeでテストすると、私にとってうまく機能した唯一のソリューションは、次のようにAaronのソリューションでsetTimeoutを使用することです。

setTimeout( function () {
    $('body, html').stop().animate({ scrollTop: 0 }, 100);
}, 500);

ChromeとEdgeでページをリロードしたときに、他のどのソリューションも以前のscrollTopをリセットしませんでした。残念ながら、Edgeにはまだ少し「フリック」があります。

— エール
ソース
0

だから私もこの問題を抱えていて、この関数を書きました：

/***Working function for ajax loading Start*****************/
function fuweco_loadMoreContent(elmId/*element ID without #*/,ajaxLink/*php file path*/,postParameterObject/*post parameters list as JS object with properties (new Object())*/,tillElementEnd/*point of scroll when must be started loading from AJAX*/){
	var	
		contener = $("#"+elmId),
		contenerJS = document.getElementById(elmId);
	if(contener.length !== 0){
		var	
			elmFullHeight = 
				contener.height()+
				parseInt(contener.css("padding-top").slice(0,-2))+
				parseInt(contener.css("padding-bottom").slice(0,-2)),
			SC_scrollTop = contenerJS.scrollTop,
			SC_max_scrollHeight = contenerJS.scrollHeight-elmFullHeight;
		if(SC_scrollTop >= SC_max_scrollHeight - tillElementEnd){
			$("#"+elmId).unbind("scroll");
			$.post(ajaxLink,postParameterObject)
			 .done(function(data){
			 	if(data.length != 0){
					$("#"+elmId).append(data);
					$("#"+elmId).scroll(function (){
						fuweco_reloaderMore(elmId,ajaxLink,postParameterObject);
					});
				}
			 });
		}
	}
}
/***Working function for ajax loading End*******************/
/***Sample function Start***********************************/
function reloaderMore(elementId) {
	var
		contener = $("#"+elementId),
		contenerJS = document.getElementById(elementId)
	;

    if(contener.length !== 0){
    	var
			elmFullHeight = contener.height()+(parseInt(contener.css("padding-top").slice(0,-2))+parseInt(contener.css("padding-bottom").slice(0,-2))),
			SC_scrollTop = contenerJS.scrollTop,
			SC_max_scrollHeight = contenerJS.scrollHeight-elmFullHeight
		;
		if(SC_scrollTop >= SC_max_scrollHeight - 200){
			$("#"+elementId).unbind("scroll");
			$("#"+elementId).append('<div id="elm1" style="margin-bottom:15px;"><h1>Was loaded</h1><p>Some text for content. Some text for content. Some text for content.	Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content.</p></div>');
			$("#"+elementId).delay(300).scroll(function (){reloaderMore(elementId);});
		}
    }
}
/***Sample function End*************************************/
/***Sample function Use Start*******************************/
$(document).ready(function(){
	$("#t1").scrollTop(0).scroll(function (){
		reloaderMore("t1");
    });
});
/***Sample function Use End*********************************/
.reloader {
    border: solid 1px red;
    overflow: auto;
    overflow-x: hidden;
    min-height: 400px;
    max-height: 400px;
    min-width: 400px;
    max-width: 400px;
    height: 400px;
    width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<div class="reloader" id="t1">
		<div id="elm1" style="margin-bottom:15px;">
			<h1>Some text for header.</h1>
			<p>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
			</p>
		</div>
		<div id="elm2" style="margin-bottom:15px;">
			<h1>Some text for header.</h1>
			<p>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
			</p>
		</div>
		<div id="elm3" style="margin-bottom:15px;">
			<h1>Some text for header.</h1>
			<p>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
			</p>
		</div>		
	</div>
スニペットを展開

他のプログラマーにも役立つことを願っています。

— ウラジミールA。
ソース
0

html、bodyセレクターを使用してMozillaで問題なく動作する場合、問題がオーバーフローに関連している可能性があります。htmlまたはbodyのオーバーフローが自動に設定されている場合、これによりchromeが正常に動作しなくなります。 、autoに設定されていると、animateのscrollTopプロパティが機能しなくなります。理由はわかりません。しかし、解決策はオーバーフローを省略することです。設定しないでください。それは私のためにそれを解決しました！自動に設定している場合は、外してください。

非表示に設定している場合は、「user2971963」の回答（ctrl + fで検索）に記載されているとおりに実行してください。これがお役に立てば幸いです。

— モハメド・アラル
ソース
0 
 $("html, body").animate({ scrollTop: 0 }, "slow");

このCSSは上にスクロールすると競合するため、注意してください 

 html, body {
         overflow-x: hidden;        
    }
— アシュトーシュ・ジャー
ソース
-3

scrollTopは有効なプロパティではないと思います。スクロールをアニメーション化する場合は、jquery用のscrollToプラグインを試してください

http://plugins.jquery.com/project/ScrollTo

— ベンロウ
ソース
scrollTop（）はプロパティだといつ言いましたか？この関数はすでにjQueryに実装されているため、プラグインを使用する必要はありません。
— Bayard Randel 2010年
@ Bayan-削除された回答には回答がWhen did I say scrollTop() is a property?あり、さらにOPはスムーズなアニメーションを望んでおり、スムーズにscrollTop()実行できますか？...そして上記のBenの回答が明確に述べていることは注目に値しI don't think the scrollTop is a valid property、あなたは次のようにコメントしましたscrollTop() is valid jQuery...
— Reigel 2010年
1
@Majuは十分に公平です。ただし、問題が分類されたことをうれしく思います:)
— Ben Rowe 2010年
@ReigelScrollTopは問題なくスムーズに動作します：jsfiddle.net/JohnnyWalkerDesign/w4hetv45
— Chuck Le Butt
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.