解決 jQuery 的 animate scrollTop 方法在 Firefox 沒有作用的問題

最近發生在自己手邊上的案子,發生了這個問題,jQuery 的 scrollTop 是一個很常用的功能,常常我們會在某些 link 上面綁定 click 事件,觸發 scrollTop,然後畫面就會捲到適當的位置,而我發現在 Firefox 卻無法捲動,為什麼呢?

這是因為當 animate 的 scrollTop 方法,其他瀏覽器會作用在 body 元素上,而 FireFox 卻是作用在 html 元素之上,所以本來我的寫法是這樣:



$('element').click(function(e){
    $('body').animate({
            scrollTop:  $('element').offset().top},'slow');
});


因為 animate 只綁到 body,因此就會漏掉 Firefox 沒有作用到,只要加上綁定在 html 上就可以解決:


$('element').click(function(e){
    $('body, html').animate({
            scrollTop:  $('element').offset().top},'slow');
});



參考: Animate scrollTop not working in firefox


留言

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源