jQuery scrollTop nie działa w przeglądarce Chrome, ale działa w przeglądarce Firefox

Użyłem scrollTopfunkcji w jQuery do przechodzenia na górę, ale dziwnie „płynne animowane przewijanie” przestało działać w Safari i Chrome (przewijanie bez płynnej animacji) po wprowadzeniu pewnych zmian.

Ale nadal działa płynnie w Firefoksie. Co może być nie tak?

Oto funkcja jQuery, której użyłem,

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;*/
}

Spróbuj użyć $("html,body").animate({ scrollTop: 0 }, "slow");

To działa dla mnie w chrome.

Jeśli Twój htmlelement CSS ma następujące overflowznaczniki, scrollTopnie będzie działać.

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

Aby umożliwić scrollTopprzewijanie, zmodyfikuj swój znacznik, usuń overflowznacznik z htmlelementu i dołącz do bodyelementu.

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

Działa w obu przeglądarkach, jeśli używasz scrollTop () z 'dokumentem':

$(document).scrollTop();

... zamiast „html” lub „body”. W przeciwnym razie nie będzie działać jednocześnie w obu przeglądarkach.

Użyłem tego z powodzeniem w Chrome, Firefox i Safari. Nie udało mi się jeszcze przetestować tego w IE.

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

Powodem użycia instrukcji „if” jest sprawdzenie, czy użytkownik jest gotowy na górze strony. Jeśli tak, nie rób animacji. W ten sposób nie musimy martwić się zbytnio o rozdzielczość ekranu.

Powód, dla którego używam $(document).scrollTopzamiast tj. $('html,body')z jakiegoś powodu Chrome zawsze zwraca 0.

Miałem ten sam problem z przewijaniem w chrome. Więc usunąłem te linie kodów z mojego pliku stylu.

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

Teraz mogę bawić się scrollem i działa:

var pos = 500;
$("html,body").animate({ scrollTop: pos }, "slow");

Przewiń treść i sprawdź, czy zadziałało:

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");

Jest to bardziej wydajne niż $("html, body").animateużycie tylko jednej animacji, a nie dwóch. Zatem tylko jedno wywołanie zwrotne jest uruchamiane, a nie dwa.

może masz na myśli top: 0

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

od animowanych dokumentów

.animate ( properties , [duration], [easing], [callback])
properties Mapa właściwości CSS, w kierunku których będzie się poruszać animacja.
...

czy $(window).scrollTop()?

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

// 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");

ALE najlepszym podejściem jest przewinięcie identyfikatora do widoku za pomocą samego natywnego interfejsu API (ponieważ i tak przewijasz do góry, może to być tylko zewnętrzny element div):

document.getElementById('wrapperIDhere').scrollIntoView(true);

Używam:

var $scrollEl = $.browser.mozilla ? $('html') : $('body');

ponieważ read jQuery scrollTop nie działa w Chrome, ale działa w Firefoksie

Lepszym sposobem rozwiązania tego problemu jest użycie takiej funkcji:

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);
}

Będzie to działać we wszystkich przeglądarkach i zapobiegnie dwukrotnemu przewinięciu FireFox w górę (co się stanie, jeśli użyjesz zaakceptowanej odpowiedzi - $("html,body").animate({ scrollTop: 0 }, "slow");).

Testując na Chrome, Firefox i Edge jedynym rozwiązaniem, które działało dobrze, jest użycie setTimeout z rozwiązaniem Aarona w ten sposób:

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

Żadne z innych rozwiązań nie zresetowało poprzedniego scrollTop, kiedy ponownie załadowałem stronę, w Chrome i Edge dla mnie. Niestety w Edge wciąż jest mały „flick”.

Więc też miałem ten problem i napisałem tę funkcję:

/***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>

Mam nadzieję, że będzie to pomocne dla innych programistów.

Jeśli wszystko działa dobrze dla Mozilli, z html, selektorem ciała, to jest duża szansa, że ​​problem jest związany z przepełnieniem, jeśli przepełnienie w html lub body jest ustawione na auto, to spowoduje to, że chrome nie będzie działał dobrze , ponieważ gdy jest ustawione na auto, właściwość scrollTop na animate nie będzie działać, nie wiem dokładnie dlaczego! ale rozwiązaniem jest pominięcie przepełnienia, nie ustawiaj go! rozwiązało to dla mnie! jeśli ustawiasz go na auto, zdejmij go!

jeśli ustawiasz go jako ukryty, zrób to, co jest opisane w odpowiedzi "user2971963" (ctrl + f, aby go znaleźć). mam nadzieję, że to się przyda!

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

Ten konflikt CSS z przewijaniem do góry, więc zajmij się tym

 html, body {
         overflow-x: hidden;        
    }

Nie sądzę, że scrollTop jest prawidłową właściwością. Jeśli chcesz animować przewijanie, wypróbuj wtyczkę scrollTo do jquery

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