广告位联系
返回顶部
分享到

JS滚动到顶部踩坑解决记录

JavaScript 来源:未知 作者:佚名 发布时间:2023-05-16 22:57:42 人浏览
摘要

一般在比较长的页面中会有一个滚动到顶部的按钮,用户点击一下 300ms 内,会滚动到顶部,有动画效果。 一开始我想,这不是很简单,一行代码完美解决 1 $(document.documentElement).animat

一般在比较长的页面中会有一个滚动到顶部的按钮,用户点击一下 300ms 内,会滚动到顶部,有动画效果。

一开始我想,这不是很简单,一行代码完美解决

1

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

使用这个可以到顶部,但是没有动画,没有采用

1

$(document.documentElement).scrollTop(0)

等到了手机上才发现,点击居然没有反应,才发现原来是我想的太简单,一个滚动到顶部的按钮竟然有这么多兼容问题。

document.body在 手机上能用,pc 上不能用

1

2

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

console.log(document.body.scrollTop)   // 移动端有值,pc 为0

document.documentElement在 PC 上能用,但手机上不能用

1

2

$(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

1

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

以为 js 良心发现,提供了一个这么好用的 api,可以滚动到顶部,还有动画,查看兼容性的时候, ios 居然不支持,害,果然就没有好事情。

所以在遇到滚动到顶部时,document.scrollingElement 除了 IE 和 opera 和部分低版本浏览器不支持外,可以基本满足需求。


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • JS删除数组里的某个元素方法介绍
    删除数组指定的某个元素 一个包解决你所有的JS问题,点击获取 js删除数组中某一项或几项的几种方法https://www.jb51.net/article/154737.htm 首先可以
  • JS滚动到顶部踩坑解决记录
    一般在比较长的页面中会有一个滚动到顶部的按钮,用户点击一下 300ms 内,会滚动到顶部,有动画效果。 一开始我想,这不是很简单,一行
  • React-Router(V6)的权限控制实现
    在一个后台管理系统中,安全是很重要的。不光后端需要做权限校验,前端也需要做权限控制。 我们可以大致将权限分为3种:接口权限、页
  • Vue3之getCurrentInstance与ts结合使用的方式
    getCurrentInstance与ts结合使用 vue3项目中,如果不用ts这样使用是没问题的 1 const { proxy } = getCurrentInstance() 在ts中使用会报错:报错:...类型Co
  • Vue3进阶主题Composition API使用介绍
    Composition API 是 Vue3 中引入的一种新的 API 风格,旨在提高代码的可读性、可维护性和可重用性。Composition API 不同于 Vue2 中的 Options API,它采
  • ChatGPT Notion AI 从注册到体验及免费使用过程

    ChatGPT Notion AI 从注册到体验及免费使用过程
    Notion AI 是一款基于人工智能的文本编辑工具,具备生成内容、修改内容的功能,可用于文稿写作、会议日程、新闻稿、销售文案等内容的辅
  • ChatGPT如何写好Prompt编程
    现在已经产生了一种新职业:Prompt Engineer(提示指令工程师),可见 Prompt 是多么重要,且编写不易。 ChatGPT的产出,一半决定于它的实力,
  • ChatGPT前端编程秀之别拿编程语言不当语言

    ChatGPT前端编程秀之别拿编程语言不当语言
    写完小工具,这一篇回来我们接着写我们的程序。再看一眼我们的程序运行视图: 带着TDD思路,我进入了 ejs_and_yaml_dsl_loader 这个模块,这块
  • Angular独立组件入门指南
    如果你正在学习Angular,那么你可能已经听说过独立组件(Component)。顾名思义,独立组件就是可以独立使用和管理的组件,它们能够被包含
  • 解决JS请求路径控制台报错 Failed to launch'xxx' bec
    控制台报错: Failed to launch xxx because the scheme does not have a registered handler. 这种错误是因为请求没有协议,应该把协议头加上 错误的例子 window.
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计