正文

一般在比較長(zhǎng)的頁(yè)面中會(huì)有一個(gè)滾動(dòng)到頂部的按鈕，用戶(hù)點(diǎn)擊一下 300ms 內(nèi)，會(huì)滾動(dòng)到頂部，有動(dòng)畫(huà)效果。

一開(kāi)始我想，這不是很簡(jiǎn)單，一行代碼完美解決

$(document.documentElement).animate({scrollTop: 0}, 300);

使用這個(gè)可以到頂部，但是沒(méi)有動(dòng)畫(huà)，沒(méi)有采用

$(document.documentElement).scrollTop(0)

等到了手機(jī)上才發(fā)現(xiàn)，點(diǎn)擊居然沒(méi)有反應(yīng)，才發(fā)現(xiàn)原來(lái)是我想的太簡(jiǎn)單，一個(gè)滾動(dòng)到頂部的按鈕竟然有這么多兼容問(wèn)題。

document.body在 手機(jī)上能用，pc 上不能用

$(document.body).animate({scrollTop: 0}, 300);
console.log(document.body.scrollTop)   // 移動(dòng)端有值，pc 為0

document.documentElement在 PC 上能用，但手機(jī)上不能用

$(document.documentElement).animate({scrollTop: 0}, 300);
console.log(document.documentElement.scrollTop)   // pc端有值，移動(dòng)端為0

也就是說(shuō) PC 端滾動(dòng)的是document.documentElement，在移動(dòng)端滾動(dòng)的是 document.body

如果沒(méi)有一個(gè)更好的 api，那么就需要在分環(huán)境處理滾動(dòng)元素，這樣顯的就有點(diǎn)麻煩。

這時(shí)候 document.scrollingElement 就出現(xiàn)，這個(gè) api 就是為解決這個(gè)問(wèn)題誕生的，通過(guò) document.scrollingElement.tagName 可以看到在 PC 端是 html 在移動(dòng)端是 body 。

在做解決問(wèn)題的時(shí)候，搜索到一個(gè) api

window.scrollTo({top: 0, behavior: "smooth"})

以為 js 良心發(fā)現(xiàn)，提供了一個(gè)這么好用的 api，可以滾動(dòng)到頂部，還有動(dòng)畫(huà)，查看兼容性的時(shí)候， ios 居然不支持，害，果然就沒(méi)有好事情。

所以在遇到滾動(dòng)到頂部時(shí)，document.scrollingElement 除了 IE 和 opera 和部分低版本瀏覽器不支持外，可以基本滿(mǎn)足需求。

以上就是JS滾動(dòng)到頂部踩坑解決記錄的詳細(xì)內(nèi)容，更多關(guān)于JS滾動(dòng)到頂部的資料請(qǐng)關(guān)注其它相關(guān)文章！