JS滾動到頂部踩坑解決記錄
正文
一般在比較長的頁面中會有一個滾動到頂部的按鈕，用戶點擊一下 300ms 內，會滾動到頂部，有動畫效果。
一開始我想，這不是很簡單，一行代碼完美解決
$(document.documentElement).animate({scrollTop: 0}, 300);使用這個可以到頂部，但是沒有動畫，沒有采用
$(document.documentElement).scrollTop(0)
等到了手機上才發(fā)現，點擊居然沒有反應，才發(fā)現原來是我想的太簡單，一個滾動到頂部的按鈕竟然有這么多兼容問題。
document.body在 手機上能用，pc 上不能用
$(document.body).animate({scrollTop: 0}, 300);
console.log(document.body.scrollTop) // 移動端有值，pc 為0document.documentElement在 PC 上能用，但手機上不能用
$(document.documentElement).animate({scrollTop: 0}, 300);
console.log(document.documentElement.scrollTop) // pc端有值，移動端為0也就是說 PC 端滾動的是document.documentElement，在移動端滾動的是 document.body
如果沒有一個更好的 api，那么就需要在分環(huán)境處理滾動元素，這樣顯的就有點麻煩。
這時候 document.scrollingElement 就出現，這個 api 就是為解決這個問題誕生的，通過 document.scrollingElement.tagName 可以看到在 PC 端是 html 在移動端是 body 。
在做解決問題的時候，搜索到一個 api
window.scrollTo({top: 0, behavior: "smooth"})以為 js 良心發(fā)現，提供了一個這么好用的 api，可以滾動到頂部，還有動畫，查看兼容性的時候， ios 居然不支持，害，果然就沒有好事情。
所以在遇到滾動到頂部時，document.scrollingElement 除了 IE 和 opera 和部分低版本瀏覽器不支持外，可以基本滿足需求。
以上就是JS滾動到頂部踩坑解決記錄的詳細內容，更多關于JS滾動到頂部的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了JavaScript異步操作中串行和并行，主要內容是寫一下js中es5和es6針對異步函數，串行執(zhí)行和并行執(zhí)行的方案。已經串行和并行結合使用的例子。,需要的朋友可以參考一下2021-11-11
微信小程序 使用picker封裝省市區(qū)三級聯(lián)動實例代碼
這篇文章主要介紹了微信小程序 使用picker封裝省市區(qū)三級聯(lián)動實例代碼的相關資料,需要的朋友可以參考下2016-10-10
JavaScript 中有了Object 為什么還需要 Map 呢
Map 是用于存儲鍵值的，而 JavaScript 中對象也是由鍵值對組成的，那么 Map 存在的意義是什么呢？下面文章小編就來向大家詳細介紹吧,需要的朋友可以參考下2021-09-09
這篇文章主要分享的是JavaScript的八種數據類型，ES5的時候，我們大家認知的數據類型是?6種的，但是ES6?中新增了一種?Symbol，谷歌67版本中還出現了一種?bigInt，是指安全存儲、操作大整數，像下面文章我可沒就來看看這八種數據類型的詳細介紹吧2022-01-01
lodash內部方法getFuncName及setToString剖析詳解
本篇章我們主要是通過了解lodash里的兩個內部方法getFuncName方法和setToString方法，在實際開發(fā)中我們也可以借鑒方法的實現思路，在需要的時候簡單封裝一下，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
微信小程序Server端環(huán)境配置詳解（SSL， Nginx HTTPS，TLS 1.2 升級）
這篇文章主要介紹了微信小程序Server端環(huán)境配置詳解（SSL， Nginx HTTPS，TLS 1.2 升級）的相關資料,需要的朋友可以參考下2017-01-01
JavaScript前端學算法題解LeetCode最大重復子字符串
這篇文章主要為大家介紹了JavaScript前端學算法題解LeetCode最大重復子字符串，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了JS深入淺出Function與構造函數，Function是一個構造函數，可以通過該構造函數去創(chuàng)建一個函數，創(chuàng)建的函數是一個Function對象，具體內容請參考下面文章的詳細內容,需要的朋友可以參考一下2021-12-12
這篇文章主要介紹關于前端JavaScript的Promise，Promise 是異步編程的一種解決方案，下面文章我們就來看看Promise的基本用法及各種方法,需要的朋友可以參考一下，希望對你有所幫助2021-10-10
讓chatGPT教你如何使用taro創(chuàng)建mbox
這篇文章主要為大家介紹了讓chatGPT教你如何使用taro創(chuàng)建mbox實現實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03