jQuery scrollTop不在Chrome中工作，但在Firefox中工作

Question

我在jQuery中使用scrollTop函數導航到頂部，但奇怪的是，「平滑的動畫滾動」在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;*/ 
} 

Answer 1

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

這鉻爲我工作。

Answer 2

我不認爲scrollTop的是有效的財產。如果你想動畫滾動，嘗試scrollTo jQuery插件

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

Answer 3

也許你的意思是top: 0

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

從animate docs

.animate（性能，[長]，[easing]，[callback]）
屬性動畫將移向的CSS屬性的映射。
...

或$(window).scrollTop()？

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

Answer 4

我已經在Chrome，Firefox和Safari中成功使用了它。還沒有能夠在IE中測試它。

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

「if」語句的原因是檢查用戶是否已準備好位於網站的頂部。如果是這樣，不要做動畫。這樣我們就不必擔心屏幕分辨率。

我使用$(document).scrollTop而不是ie的原因。 $('html,body')是因爲某些原因，Chrome始終返回0。

$(document).scrollTop(); 

...而不是 'HTML' 或 '體'：

Answer 5

如果使用scrollTop的（）的 '文件' 它工作在這兩個瀏覽器。其他方式在兩個瀏覽器中都不能同時工作。

Answer 6

// 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（因爲你滾動到頂部反正這可能只是你的外層div）滾動一個id爲您的視口：

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

Answer 7

我用：

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

因爲讀jQuery scrollTop not working in Chrome but working in Firefox

Answer 8

滾動體和檢查它是否工作：

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效率更高，因爲只使用一個動畫，而不是兩個。因此，只有一個回調觸發，而不是兩個。

Answer 9

如果您的CSS html元素具有以下overflow標記，scrollTop將不起作用。

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

爲了讓scrollTop滾動，修改您的標記從html元素中刪除overflow標記，並追加到body元素。

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

Answer 10

一個更好的辦法來解決這個問題是使用這樣的功能：

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中，從兩次向上滾動（這是如果你使用會發生什麼接受的答案 - $("html,body").animate({ scrollTop: 0 }, "slow");）。

Answer 11

測試在Chrome，Firefox和邊緣，只有與艾倫以這種方式解決工作得很好，我正在使用的setTimeout的解決方案：

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

其他解決方案沒有一個重置了的previuos scrollTop的，當我重新加載頁面時，在我的Chrome和Edge中。 不幸的是Edge還是有一些「輕彈」。

Answer 12

所以我也有這個問題，我寫了這個功能：

/***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*/){ 
 
\t var \t 
 
\t \t contener = $("#"+elmId), 
 
\t \t contenerJS = document.getElementById(elmId); 
 
\t if(contener.length !== 0){ 
 
\t \t var \t 
 
\t \t \t elmFullHeight = 
 
\t \t \t \t contener.height()+ 
 
\t \t \t \t parseInt(contener.css("padding-top").slice(0,-2))+ 
 
\t \t \t \t parseInt(contener.css("padding-bottom").slice(0,-2)), 
 
\t \t \t SC_scrollTop = contenerJS.scrollTop, 
 
\t \t \t SC_max_scrollHeight = contenerJS.scrollHeight-elmFullHeight; 
 
\t \t if(SC_scrollTop >= SC_max_scrollHeight - tillElementEnd){ 
 
\t \t \t $("#"+elmId).unbind("scroll"); 
 
\t \t \t $.post(ajaxLink,postParameterObject) 
 
\t \t \t .done(function(data){ 
 
\t \t \t \t if(data.length != 0){ 
 
\t \t \t \t \t $("#"+elmId).append(data); 
 
\t \t \t \t \t $("#"+elmId).scroll(function(){ 
 
\t \t \t \t \t \t fuweco_reloaderMore(elmId,ajaxLink,postParameterObject); 
 
\t \t \t \t \t }); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t } 
 
\t } 
 
} 
 
/***Working function for ajax loading End*******************/ 
 
/***Sample function Start***********************************/ 
 
function reloaderMore(elementId) { 
 
\t var 
 
\t \t contener = $("#"+elementId), 
 
\t \t contenerJS = document.getElementById(elementId) 
 
\t ; 
 

 
    if(contener.length !== 0){ 
 
    \t var 
 
\t \t \t elmFullHeight = contener.height()+(parseInt(contener.css("padding-top").slice(0,-2))+parseInt(contener.css("padding-bottom").slice(0,-2))), 
 
\t \t \t SC_scrollTop = contenerJS.scrollTop, 
 
\t \t \t SC_max_scrollHeight = contenerJS.scrollHeight-elmFullHeight 
 
\t \t ; 
 
\t \t if(SC_scrollTop >= SC_max_scrollHeight - 200){ 
 
\t \t \t $("#"+elementId).unbind("scroll"); 
 
\t \t \t $("#"+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. \t 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>'); 
 
\t \t \t $("#"+elementId).delay(300).scroll(function(){reloaderMore(elementId);}); 
 
\t \t } 
 
    } 
 
} 
 
/***Sample function End*************************************/ 
 
/***Sample function Use Start*******************************/ 
 
$(document).ready(function(){ 
 
\t $("#t1").scrollTop(0).scroll(function(){ 
 
\t \t 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> 
 
\t <div class="reloader" id="t1"> 
 
\t \t <div id="elm1" style="margin-bottom:15px;"> 
 
\t \t \t <h1>Some text for header.</h1> 
 
\t \t \t <p> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t </p> 
 
\t \t </div> 
 
\t \t <div id="elm2" style="margin-bottom:15px;"> 
 
\t \t \t <h1>Some text for header.</h1> 
 
\t \t \t <p> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t </p> 
 
\t \t </div> 
 
\t \t <div id="elm3" style="margin-bottom:15px;"> 
 
\t \t \t <h1>Some text for header.</h1> 
 
\t \t \t <p> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t </p> 
 
\t \t </div> \t \t 
 
\t </div>

我希望這將是有益的其他程序員。

Answer 13

我在滾動chrome時遇到了同樣的問題。所以我刪除這行代碼從我的風格文件。

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

現在我可以用滾動播放，它的工作原理：

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

Answer 14

如果它工作的所有罰款爲Mozilla，與HTML，機身選擇，然後有一個很好的機會，問題是有關溢出，如果在html或body中的溢出設置爲auto，那麼這會導致chrome不能正常工作，因爲它被設置爲auto時，scrollTop屬性在動畫中將不起作用，我不知道爲什麼！但解決方案是省略溢出，不要設置它！爲我解決了它！如果您將其設置爲自動，請將其取下！

如果您將其設置爲隱藏狀態，則按照「user2971963」回答（按Ctrl + F查找它）所述執行操作。希望這是有用的！

Answer 15

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

這與滾動到頂部，以便利用這個

html, body { 
     overflow-x: hidden;   
    }