jQuery scrollTop no funciona en Chrome pero funciona en Firefox

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

 Go Top  

CSS

 #gotop { cursor: pointer; position: relative; float: right; right: 20px; /*top:0px;*/ } 

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

Esto funciona para mí en Chrome.

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

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.

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 statement “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.

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 callback, no dos.

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

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], [callback])
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; }); 
 // 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); 

Yo suelo:

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

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

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

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.

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('

Was loaded

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.

'); $("#"+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; } 
  

Some text for header.

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.

Some text for header.

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.

Some text for header.

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.

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!

  $("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; } 

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