JS滚动到顶部踩坑解决记录
正文
一般在比较长的页面中会有一个滚动到顶部的按钮，用户点击一下 300ms 内，会滚动到顶部，有动画效果。
一开始我想，这不是很简单，一行代码完美解决
$(document.documentElement).animate({scrollTop: 0}, 300);使用这个可以到顶部，但是没有动画，没有采用
$(document.documentElement).scrollTop(0)
等到了手机上才发现，点击居然没有反应，才发现原来是我想的太简单，一个滚动到顶部的按钮竟然有这么多兼容问题。
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，那么就需要在分环境处理滚动元素，这样显的就有点麻烦。
这时候 document.scrollingElement 就出现，这个 api 就是为解决这个问题诞生的，通过 document.scrollingElement.tagName 可以看到在 PC 端是 html 在移动端是 body 。
在做解决问题的时候，搜索到一个 api
window.scrollTo({top: 0, behavior: "smooth"})以为 js 良心发现，提供了一个这么好用的 api，可以滚动到顶部，还有动画，查看兼容性的时候， ios 居然不支持，害，果然就没有好事情。
所以在遇到滚动到顶部时，document.scrollingElement 除了 IE 和 opera 和部分低版本浏览器不支持外，可以基本满足需求。
以上就是JS滚动到顶部踩坑解决记录的详细内容，更多关于JS滚动到顶部的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了JavaScript异步操作中串行和并行，主要内容是写一下js中es5和es6针对异步函数，串行执行和并行执行的方案。已经串行和并行结合使用的例子。,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了微信小程序 使用picker封装省市区三级联动实例代码的相关资料,需要的朋友可以参考下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方法，在实际开发中我们也可以借鉴方法的实现思路，在需要的时候简单封装一下，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
微信小程序Server端环境配置详解（SSL， Nginx HTTPS，TLS 1.2 升级）
这篇文章主要介绍了微信小程序Server端环境配置详解（SSL， Nginx HTTPS，TLS 1.2 升级）的相关资料,需要的朋友可以参考下2017-01-01
JavaScript前端学算法题解LeetCode最大重复子字符串
这篇文章主要为大家介绍了JavaScript前端学算法题解LeetCode最大重复子字符串，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了JS深入浅出Function与构造函数，Function是一个构造函数，可以通过该构造函数去创建一个函数，创建的函数是一个Function对象，具体内容请参考下面文章的详细内容,需要的朋友可以参考一下2021-12-12
这篇文章主要介绍关于前端JavaScript的Promise，Promise 是异步编程的一种解决方案，下面文章我们就来看看Promise的基本用法及各种方法,需要的朋友可以参考一下，希望对你有所帮助2021-10-10
这篇文章主要为大家介绍了让chatGPT教你如何使用taro创建mbox实现实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
最新评论