剛在寫document.body.scrollTop=0 實(shí)現(xiàn)返回頁面頂部時(shí)晨炕,發(fā)現(xiàn)火狐及IE下無效,但在chrome及Safari下有效毫炉,后來測(cè)試發(fā)現(xiàn)滾動(dòng)頁面一定距離后:
1瓮栗、在IE及Firefox中document.body.scrollTop的值恒為零,但是document.documentElement.scrollTop及window.pageYOffset(該參數(shù)返回文檔在垂直方向已滾動(dòng)的像素值)的值為滾動(dòng)的距離瞄勾;
2费奸、在chrome及Safari(webkit內(nèi)核)下document.documentElement.scrollTop的值恒為零,但是document.body.scrollTop及window.pageYOffset的值為滾動(dòng)的距離
一进陡、IE11的情況
二愿阐、Firefox 52.0.2的情況
三、chrome 57.0.2987.133 的情況
四趾疚、Safari的情況
用的手機(jī)Safari瀏覽器測(cè)試的缨历。。糙麦。沒錢買蘋果筆記本辛孵, 略...... 哈哈。赡磅。魄缚。(Safari內(nèi)核也為webkit,同chrome一樣)
五焚廊、總結(jié)
因此構(gòu)建返回頂部事件時(shí)冶匹,為了兼容,可以這樣寫:
goToTop.addEventListener("click", function () {
if (document.documentElement.scrollTop){
document.documentElement.scrollTop=0;
}
if (document.body.scrollTop){
document.body.scrollTop=0 ;
}
// $(window).scrollTop(0); 使用了jQuery 或zepto 等庫 可以這樣寫
})
或者更簡單的方法
goToTop.addEventListener("click", function () {
window.scrollTo(0,0); //前面一個(gè)0 表示要在窗口文檔顯示區(qū)左上角顯示的文檔的 x 坐標(biāo)节值,后面0表示y坐標(biāo)
})
值得注意的是 我們并沒有 因?yàn)閣indow.pageYOffset在這三個(gè)瀏覽器中表現(xiàn)正常徙硅,就使用window.pageYOffset=0
這樣的語句,這是因?yàn)檫@樣只是簡單的賦值而已搞疗,其不會(huì)去操作滾動(dòng)條嗓蘑。
**本文版權(quán)歸本人即簡書筆名:該賬戶已被查封 所有,如需轉(zhuǎn)載請(qǐng)注明出處匿乃。謝謝桩皿! *