JS滾動(dòng)到頂部踩坑解決記錄
正文
一般在比較長(zhǎng)的頁(yè)面中會(huì)有一個(gè)滾動(dòng)到頂部的按鈕，用戶點(diǎn)擊一下 300ms 內(nèi)，會(huì)滾動(dòng)到頂部，有動(dòng)畫效果。
一開(kāi)始我想，這不是很簡(jiǎn)單，一行代碼完美解決
$(document.documentElement).animate({scrollTop: 0}, 300);使用這個(gè)可以到頂部，但是沒(méi)有動(dòng)畫，沒(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 為0document.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)畫，查看兼容性的時(shí)候， ios 居然不支持，害，果然就沒(méi)有好事情。
所以在遇到滾動(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)文章
這篇文章主要介紹了JavaScript異步操作中串行和并行，主要內(nèi)容是寫一下js中es5和es6針對(duì)異步函數(shù)，串行執(zhí)行和并行執(zhí)行的方案。已經(jīng)串行和并行結(jié)合使用的例子。,需要的朋友可以參考一下2021-11-11
微信小程序 使用picker封裝省市區(qū)三級(jí)聯(lián)動(dòng)實(shí)例代碼
這篇文章主要介紹了微信小程序 使用picker封裝省市區(qū)三級(jí)聯(lián)動(dòng)實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
JavaScript 中有了Object 為什么還需要 Map 呢
Map 是用于存儲(chǔ)鍵值的，而 JavaScript 中對(duì)象也是由鍵值對(duì)組成的，那么 Map 存在的意義是什么呢？下面文章小編就來(lái)向大家詳細(xì)介紹吧,需要的朋友可以參考下2021-09-09
這篇文章主要分享的是JavaScript的八種數(shù)據(jù)類型，ES5的時(shí)候，我們大家認(rèn)知的數(shù)據(jù)類型是?6種的，但是ES6?中新增了一種?Symbol，谷歌67版本中還出現(xiàn)了一種?bigInt，是指安全存儲(chǔ)、操作大整數(shù)，像下面文章我可沒(méi)就來(lái)看看這八種數(shù)據(jù)類型的詳細(xì)介紹吧2022-01-01
lodash內(nèi)部方法getFuncName及setToString剖析詳解
本篇章我們主要是通過(guò)了解lodash里的兩個(gè)內(nèi)部方法getFuncName方法和setToString方法，在實(shí)際開(kāi)發(fā)中我們也可以借鑒方法的實(shí)現(xiàn)思路，在需要的時(shí)候簡(jiǎn)單封裝一下，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
微信小程序Server端環(huán)境配置詳解（SSL， Nginx HTTPS，TLS 1.2 升級(jí)）
這篇文章主要介紹了微信小程序Server端環(huán)境配置詳解（SSL， Nginx HTTPS，TLS 1.2 升級(jí)）的相關(guān)資料,需要的朋友可以參考下2017-01-01
JavaScript前端學(xué)算法題解LeetCode最大重復(fù)子字符串
這篇文章主要為大家介紹了JavaScript前端學(xué)算法題解LeetCode最大重復(fù)子字符串，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了JS深入淺出Function與構(gòu)造函數(shù)，F(xiàn)unction是一個(gè)構(gòu)造函數(shù)，可以通過(guò)該構(gòu)造函數(shù)去創(chuàng)建一個(gè)函數(shù)，創(chuàng)建的函數(shù)是一個(gè)Function對(duì)象，具體內(nèi)容請(qǐng)參考下面文章的詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-12-12
這篇文章主要介紹關(guān)于前端JavaScript的Promise，Promise 是異步編程的一種解決方案，下面文章我們就來(lái)看看Promise的基本用法及各種方法,需要的朋友可以參考一下，希望對(duì)你有所幫助2021-10-10
讓chatGPT教你如何使用taro創(chuàng)建mbox
這篇文章主要為大家介紹了讓chatGPT教你如何使用taro創(chuàng)建mbox實(shí)現(xiàn)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03