問題
我在個人站點的左下角和右下角各自使用了如下代碼來將頁面滾動到頂部和底部:
$("body").animate({scrollTop:0},800);
$("body").animate({scrollTop:$(document).height()},800);
最近才忽然發現在Chrome瀏覽器下,上面的代碼沒有問題,而在Firefox下卻是無效的。百度后才知道,原來這是因為這兩個瀏覽器自身的問題導致的。
對於Chrome而言,支持的是這種寫法:
$("body").animate({"scrollTop":top});
而對於Firefox,則是支持如下寫法:
$("html").animate({"scrollTop":top});
之前就一直耳聞前端開發需要兼容不同瀏覽器,非常地麻煩,今天算是見識到了冰山一角。
解決方法
既然這兩個瀏覽器各自支持一種標簽選擇器,那么只要把兩者統合起來即可實現兼容:
$("html,body").animate({"scrollTop":top});
最終,將我的代碼改成如下形式便沒問題了:
$("html,body").animate({scrollTop:0},800);
$("html,body").animate({scrollTop:$(document).height()},800);