jQuery scrollTop ne fonctionne pas dans Chrome mais fonctionne dans Firefox

J’ai utilisé une fonction scrollTop dans jQuery pour naviguer vers le haut, mais étrangement, «le défilement animé et fluide» a cessé de fonctionner dans Safari et Chrome (défilement sans animation fluide) après quelques modifications.

Mais il fonctionne toujours correctement dans Firefox. Qu’est-ce qui pourrait être faux?

Voici la fonction jQuery que j’ai utilisée,

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

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

Cela fonctionne pour moi en chrome.

Si votre élément html CSS a le balisage de overflow suivant, scrollTop ne fonctionnera pas.

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

Pour permettre à scrollTop de défiler, modifiez le marquage de suppression de overflow de votre élément html et ajoutez-le à un élément body .

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

Cela fonctionne dans les deux navigateurs si vous utilisez scrollTop () avec ‘document’:

 $(document).scrollTop(); 

… au lieu de “html” ou “body”. Autrement, cela ne fonctionnera pas en même temps dans les deux navigateurs.

Je l’ai utilisé avec succès dans Chrome, Firefox et Safari. Je n’ai pas encore pu le tester dans IE.

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

La raison de la déclaration “if” est de vérifier si l’utilisateur est tout prêt en haut du site. Si oui, ne faites pas l’animation. De cette façon, nous n’avons pas à nous soucier autant de la résolution de l’écran.

La raison pour laquelle j’utilise $(document).scrollTop au lieu de ie. $('html,body') est dû au fait que Chrome renvoie toujours 0 pour une raison quelconque.

Faites défiler le corps et vérifiez si cela a fonctionné:

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

C’est plus efficace que $("html, body").animate car une seule animation est utilisée, pas deux. Ainsi, un seul rappel se déclenche, pas deux.

J’ai eu le même problème avec le défilement en chrome. J’ai donc supprimé ces lignes de codes de mon fichier de style.

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

Maintenant je peux jouer avec scroll et ça marche:

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

peut-être que tu veux dire top: 0

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

des documents d’animation

.animate ( propriétés , [duration], [easing], [callback])
properties Une carte des propriétés CSS vers laquelle l’animation sera déplacée.

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

MAIS, la meilleure approche consiste à faire défiler un identifiant dans votre fenêtre en utilisant uniquement l’API native (puisque vous faites défiler vers le haut de toute façon, cela peut être juste votre div externe):

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

J’utilise:

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

parce que lire jQuery scrollTop ne fonctionne pas dans Chrome mais dans Firefox

Une meilleure façon de résoudre ce problème consiste à utiliser une fonction comme celle-ci:

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

Cela fonctionnera sur tous les navigateurs et empêchera FireFox de défiler deux fois (ce qui se passe si vous utilisez la réponse acceptée – $("html,body").animate({ scrollTop: 0 }, "slow"); ).

Testé sur Chrome, Firefox et Edge, la seule solution qui a bien fonctionné pour moi est d’utiliser setTimeout avec la solution d’Aaron de cette manière:

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

Aucune des autres solutions n’a réinstallé le scrollTop previuos, lorsque j’ai rechargé la page, dans Chrome et Edge pour moi. Malheureusement, il y a encore un petit “coup” dans Edge.

J’ai donc eu ce problème aussi et j’ai écrit cette fonction:

 /***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 tout fonctionne bien pour Mozilla, avec le HTML, le sélecteur de corps, alors il y a de fortes chances que le problème soit lié au débordement, si le débordement dans le HTML ou le corps est défini sur auto, le chrome ne fonctionnera pas bien , car lorsqu’il est défini sur auto, la propriété scrollTop sur animate ne fonctionnera pas, je ne sais pas exactement pourquoi! mais la solution consiste à omettre le débordement, ne le définissez pas! ça l’a résolu pour moi! si vous le réglez sur auto, retirez-le!

si vous le définissez sur caché, faites comme il est décrit dans “user2971963” répondez (ctrl + f pour le trouver). j’espère que c’est utile!

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

Ce conflit CSS avec défilement vers le haut alors prenez soin de cela

  html, body { overflow-x: hidden; } 

Je ne pense pas que le scrollTop soit une propriété valide. Si vous souhaitez animer le défilement, essayez le plugin scrollTo pour jquery

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