content - jQuery scrollTop no funciona en Chrome pero funciona en Firefox

css browser compatibility

Question

He usado una función scrollTop en jQuery para navegar hacia arriba, pero extrañamente ''el desplazamiento suave y animado'' dejó de funcionar en Safari y Chrome (desplazándose sin una animación uniforme) después de realizar algunos cambios.

Pero todavía funciona sin problemas en Firefox. ¿Qué podría estar mal?

Aquí está la función jQuery que utilicé,

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

Answer 1

Así que estaba teniendo este problema también y he escrito esta función:

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

Espero que sea útil para otros programadores.

Answer 2

Desplace el cuerpo y compruebe si funcionó:

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

Esto es más eficiente que $("html, body").animate porque solo se usa una animación, no dos. Por lo tanto, solo se activa una devolución de llamada, no dos.

Answer 3

Funciona en ambos navegadores si usa scrollTop () con ''document'':

$(document).scrollTop();

... en lugar de ''html'' o ''cuerpo''. De otra forma, no funcionará al mismo tiempo en ambos buscadores.

Answer 4

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

Esto funciona para mí en Chrome.

Answer 5

Lo he usado con éxito en Chrome, Firefox y Safari. Todavía no he podido probarlo en IE.

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

El motivo de la declaración "si" es verificar si el usuario está listo en la parte superior del sitio. Si es así, no hagas la animación. De esa forma no tenemos que preocuparnos tanto por la resolución de la pantalla.

La razón por la que uso $(document).scrollTop lugar de es decir. $(''html,body'') es porque Chrome siempre devuelve 0 por algún motivo.

Answer 6

No creo que scrollTop sea una propiedad válida. Si desea animar el desplazamiento, pruebe el plugin scrollTo para jquery

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

Answer 7

Probando en Chrome, Firefox y Edge, la única solución que funcionó bien para mí es usar setTimeout con la solución de Aaron de esta manera:

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

Ninguna de las otras soluciones reinició el scrollTop anterior, cuando volví a cargar la página, en Chrome y Edge para mí. Desafortunadamente todavía hay un pequeño "golpe" en Edge.

Answer 8

Si su elemento CSS html tiene el siguiente marcado de overflow , scrollTop no funcionará.

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

Para permitir que scrollTop desplace, modifique su marcado elimine el marcado de overflow del elemento html y anexe a un elemento del body .

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

Answer 9

Si todo funciona bien para Mozilla, con html, body selector, entonces existe una buena posibilidad de que el problema esté relacionado con el desbordamiento, si el desbordamiento en html o body está establecido en auto, entonces esto causará que Chrome no funcione bien , porque cuando se establece en automático, la propiedad scrollTop en animate no funcionará, ¡no sé exactamente por qué! pero la solución es omitir el desbordamiento, ¡no lo configure! ¡eso lo resolvió para mí! si lo configura en automático, quítelo!

si lo está configurando como oculto, entonces haga lo que se describe en la respuesta "user2971963" (ctrl + f para encontrarlo). espero que esto sea útil!

Answer 10

Tuve el mismo problema al desplazarme en cromo. Así que eliminé estas líneas de códigos de mi archivo de estilo.

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

Ahora puedo jugar con scroll y funciona:

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

Answer 11

Una mejor forma de resolver este problema es usar una función como esta:

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

Esto funcionará en todos los navegadores e impide que Firefox se desplace dos veces hacia arriba (que es lo que sucede si usa la respuesta aceptada - $("html,body").animate({ scrollTop: 0 }, "slow"); ).

Answer 12

Yo suelo:

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

porque lee jQuery scrollTop no funciona en Chrome pero funciona en Firefox

Answer 13

tal vez te refieres a la top: 0

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

de documentos animados

.animate ( propiedades , [duración], [aceleración], [devolución de llamada])
Propiedades Un mapa de las propiedades de CSS hacia las que se moverá la animación.
...

o $(window).scrollTop() ?

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

Answer 14

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

Este conflicto de CSS con desplazamiento hacia arriba, así que cuídate de esto

 html, body {
overflow-x: hidden;
}

Answer 15

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

PERO, el mejor enfoque es desplazar una identificación en su ventana gráfica utilizando solo una API nativa (ya que se desplaza hacia arriba de todos modos, esta puede ser solo su div externa):

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