首页 > 其他分享 >JS dom元素滚动到顶部

JS dom元素滚动到顶部

时间:2023-03-06 20:14:37浏览次数:34  
标签:box 滚动 dom timer JS oTop scrollTop

设置dom元素的scrollTop属性为0

  • 直接设(可能存在闪动,看需求):
document.querySelector('.xxx').scrollTop = 0
  • 动画平滑滚动:
toTop () {
  let timer = null
  timer = requestAnimationFrame(function fn () {
    const box = document.getElementById('xxx')
    let oTop = box.scrollTop
    if (oTop > 0) {
      box.scrollTop = oTop - 100
      timer = requestAnimationFrame(fn)
    } else {
      cancelAnimationFrame(timer)
    }
  })
}

标签:box,滚动,dom,timer,JS,oTop,scrollTop
From: https://www.cnblogs.com/jia-zq/p/17185202.html

相关文章

  • js一维数组转二维数组
    利用数组的splice方法进行转换1.封装函数  2.使用方法 ......
  • js通过身份证号识别生日、性别、年龄
    (13条消息)js前端通过身份证号判断年龄、性别、出生日期。_js判断性别_renlmmm的博客-CSDN博客//通过身份证号计算年龄、性别、出生日期functionidCard(userCard,num......
  • js阻塞的解决方法有哪些?
    1.  使用异步编程:如setTimeOut和setInterval。2.WebWorker3.promises和wait/async参考:https://www.zhihu.com/question/579418178/answer/28511034161.主线程和子......
  • js 数组中对象某个字段相等的值合并
    1、方法sameArray(data,field){letarray=[]lettmp=[]letvlaue=''data=data.sort(function(a,b){conststart=a[field]......
  • react-router-dom V6路由参数
    一、标签组件  1.search方式    <Linkto={'/main/dataForm?id=123&name=aa'}>导航</Link>    <Linkto={{pathname:'/main/dataForm',search:`?id=123&na......
  • mybatis-plus返回json数据不出来
      使用 autoResultMap属性值,自动映射json类型  @TableName(opensnewwindow)描述:表名注解,标识实体类对应的表使用位置:实体类 @TableName("sys_user"......
  • js点击图片复制图片
     <htmllang="en"><head><metacharset="UTF-8"><title>复制</title></head><body><imgid="img"width="200"height="200"src="https://img2.baidu.c......
  • NestJS——Serverless(官方文档翻译)
    无服务器计算是一种云计算执行模型,其中云提供商按需分配计算机资源,代表其客户照顾服务器。当应用未使用时,不会为应用分配计算资源。定价基于应用程序(源)消耗的实际资源量。......
  • 好文章!收藏了!————JS学习日志18 -- JS基础--对象引用和复制
                  参考:https://blog.csdn.net/Android_boom/article/details/125099640......
  • JS中创建对象与继承的方法总结
    js中对象的定义与其它面向对象语言不同,它的对象被描述为:一组无序属性的集合,其属性可以包含基本类型值、对象或者函数。而其它面向对象语言中的对象,通常指代可以通过类创建......