JS滾動(dòng)到頂部踩坑解決記錄
正文
一般在比較長(zhǎng)的頁面中會(huì)有一個(gè)滾動(dòng)到頂部的按鈕，用戶點(diǎn)擊一下 300ms 內(nèi)，會(huì)滾動(dòng)到頂部，有動(dòng)畫效果。
一開始我想，這不是很簡(jiǎn)單，一行代碼完美解決
$(document.documentElement).animate({scrollTop: 0}, 300);使用這個(gè)可以到頂部，但是沒有動(dòng)畫，沒有采用
$(document.documentElement).scrollTop(0)
等到了手機(jī)上才發(fā)現(xiàn)，點(diǎn)擊居然沒有反應(yīng)，才發(fā)現(xiàn)原來是我想的太簡(jiǎn)單，一個(gè)滾動(dòng)到頂部的按鈕竟然有這么多兼容問題。
document.body在 手機(jī)上能用，pc 上不能用
$(document.body).animate({scrollTop: 0}, 300);
console.log(document.body.scrollTop) // 移動(dòng)端有值，pc 為0document.documentElement在 PC 上能用，但手機(jī)上不能用
$(document.documentElement).animate({scrollTop: 0}, 300);
console.log(document.documentElement.scrollTop) // pc端有值，移動(dòng)端為0也就是說 PC 端滾動(dòng)的是document.documentElement，在移動(dòng)端滾動(dòng)的是 document.body
如果沒有一個(gè)更好的 api，那么就需要在分環(huán)境處理滾動(dòng)元素，這樣顯的就有點(diǎn)麻煩。
這時(shí)候 document.scrollingElement 就出現(xiàn)，這個(gè) api 就是為解決這個(gè)問題誕生的，通過 document.scrollingElement.tagName 可以看到在 PC 端是 html 在移動(dòng)端是 body 。
在做解決問題的時(shí)候，搜索到一個(gè) api
window.scrollTo({top: 0, behavior: "smooth"})以為 js 良心發(fā)現(xiàn)，提供了一個(gè)這么好用的 api，可以滾動(dòng)到頂部，還有動(dòng)畫，查看兼容性的時(shí)候， ios 居然不支持，害，果然就沒有好事情。
所以在遇到滾動(dòng)到頂部時(shí)，document.scrollingElement 除了 IE 和 opera 和部分低版本瀏覽器不支持外，可以基本滿足需求。
以上就是JS滾動(dòng)到頂部踩坑解決記錄的詳細(xì)內(nèi)容，更多關(guān)于JS滾動(dòng)到頂部的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了微信小程序 快捷鍵整理的相關(guān)資料,這里整理了不少項(xiàng)目中經(jīng)常用到的快捷鍵，需要的朋友可以參考下2016-10-10
微信小程序 時(shí)間格式化（util.formatTime(new Date)）詳解
這篇文章主要介紹了微信小程序 時(shí)間格式化（util.formatTime(new Date)）詳解的相關(guān)資料,這里附實(shí)例，一目了然很容易解決，需要的朋友可以參考下2016-11-11
這篇文章主要總結(jié)介紹了JS如何獲取對(duì)象屬性名的方法,需要的朋友可以參考下2022-01-01
利用js實(shí)現(xiàn)簡(jiǎn)單開關(guān)燈代碼
這篇文章主要分享的是如何利用js實(shí)現(xiàn)簡(jiǎn)單開關(guān)燈代碼，下面文字圍繞js實(shí)現(xiàn)簡(jiǎn)單開關(guān)燈的相關(guān)資料展開具體內(nèi)容,需要的朋友可以參考以下，希望對(duì)大家又所幫助2021-11-11
JS高級(jí)程序設(shè)計(jì)之class繼承重點(diǎn)詳解
這篇文章主要為大家介紹了JS高級(jí)程序設(shè)計(jì)之class繼承重點(diǎn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
JS實(shí)現(xiàn)一個(gè)微信錄音功能過程示例詳解
這篇文章主要介紹了JS實(shí)現(xiàn)一個(gè)微信錄音功能過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
JavaScript嚴(yán)格模式不支持八進(jìn)制的問題講解
這篇文章主要講解JavaScript嚴(yán)格模式不支持八進(jìn)制的問題，本文圍繞JavaScript嚴(yán)格模式展開內(nèi)容，詳細(xì)介紹為什么JavaScript嚴(yán)格模式不支持八進(jìn)制，下面來看看詳細(xì)介紹,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了微信小程序 條件渲染的相關(guān)資料,并附簡(jiǎn)單實(shí)例代碼，需要的朋友可以參考下2016-10-10
這篇文章主要介紹了javascript 判斷是否是微信瀏覽器的方法的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了微信小程序 MINA文件結(jié)構(gòu)的相關(guān)資料,這里詳細(xì)介紹了微信小程序的文件目錄及文件作用，需要的朋友可以參考下2016-10-10