首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >来实现一个js平滑滚动到顶部的小功能

来实现一个js平滑滚动到顶部的小功能

作者头像
马克社区
发布于 2022-07-18 10:10:12
发布于 2022-07-18 10:10:12
1.2K00
代码可运行
举报
文章被收录于专栏:高端IT高端IT
运行总次数:0
代码可运行

需要添加类名 top

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 平滑滚动到顶部
var scrollTopSmooth = function (position) {
    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function (cb) {
            return setTimeout(cb, 10);
        };
    }
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var step = function () {
        var distance = position - scrollTop;
        scrollTop = scrollTop + distance / 5;
        if (Math.abs(distance) < 1) {
            window.scrollTo(0, position);
        } else {
            window.scrollTo(0, scrollTop);
            requestAnimationFrame(step);
        }
    };
    step();
}
$backToTop = document.querySelector('.top')
$backToTop.addEventListener('click', function () {
    scrollTopSmooth(0);
}, false);

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/120074347

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
js滚动到页面顶部
js平滑滚动到顶部,底部,指定地方 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置 滚动到顶部:
IT工作者
2022/01/15
14.8K0
[第19期] 介绍一个页面平滑滚动小技巧
今天写需求的时候发现一个小的优化点:用户选择了一些数据之后, 选择的条目需要高亮, 有时候列表很长, 为了提升用户体验,需要加个滚动, 自动滚动到目标位置。
皮小蛋
2020/02/29
1.5K0
前端 实战项目·优雅实现 BackTop
BackTop 即滚动到页面顶部,是很多网站都会用到的基础功能,实现方法很多,Github 上也有许多优秀的三方库,如 smooth-scroll,但如何优雅实现也是一门学问。
数媒派
2022/12/01
6330
【前端】回到顶部
zhaokang555
2023/10/17
2500
点击按钮,回到页面顶部的5种写法
2.scrollTop:scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时,scrollTop的值为0,如果元素被垂直滚动了,scrollTop的值大于0,且表示元素上方不可见内容的像素宽度
全栈程序员站长
2022/09/07
3.1K0
基于JS实现回到页面顶部的五种写法(从实现到增强)
  使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置
botkenni
2019/09/03
6.6K0
24 个 ES6 实用方法,用来解决实际开发的 JS 问题
页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类。
Javanx
2020/03/09
8660
说说几个 API 和应用案例
除了 classList.contains 方法之外,还有一个 node.contains 方法,这个方法返回的是一个布尔值,来表示传入的节点是否为该节点的后代节点。语法:
多云转晴
2020/03/26
1.9K0
说说几个 API 和应用案例
Vue 折腾记 - (6) 写一个不大靠谱的backToTop组件
返回顶部这个功能用jq实现,好容易实现,一个animate配合scrollTo就搞定了
CRPER
2018/08/28
5900
Vue 折腾记 - (6) 写一个不大靠谱的backToTop组件
scrollto 到指定位置
goTo = function(target){ var scrollT = document.body.scrollTop|| document.documentElement.scrollTop if (scrollT >target) { var timer = setInterval(function(){ var scrollT = documen
windseek
2018/06/15
1.9K0
24 个即插即用的 JS 代码片段
作者:Madza 翻译:布兰 https://dev.to/madza/20-modern-es6-snippets-to-solve-practical-js-problems-3n83
用户4456933
2021/06/01
4590
记好这24个ES6方法,用于解决实际开发的JS问题
页面DOM里的每个例程上都有一个classList对象,程序员可以使用里面的方法添加,删除,修改例程的CSS类。使用classList,程序员还可以用它来判断某处是否被替换了某人个CSS类。
艾编程
2023/01/13
1.4K0
记好这24个ES6方法,用于解决实际开发的JS问题
收藏吧 || ES6 方法,用来解决实际开发的JS问题(一)
“ 关注 前端开发社区 ,回复 '领取资源',免费领取Vue,小程序,Node Js,前端开发用的插件以及面试视频等学习资料,让我们一起学习,一起进步
前端老道
2020/05/30
5990
收藏吧 || ES6 方法,用来解决实际开发的JS问题(一)
24个解决实际问题的ES6代码段
这篇文章基于实际使用场景总结了 24 个 ES6 代码段,可用来解决项目中可能遇到的一系列问题。
王小婷
2020/11/10
5020
Vue 滚动条定位问题
作者:matrix 被围观: 9,147 次 发布时间:2018-06-28 分类:零零星星 | 3 条评论 »
HHTjim 部落格
2022/09/26
1K0
Vue 滚动条定位问题
纯js实现网页返回顶部功能(万能的兼容目前所有浏览器)
在web2.0时代,越来越多的网站如雨后春笋般的冒了出来。而且这些网站提供了很多我们常见的功能。如:返回顶部等等小特性。
业余草
2019/01/21
1.5K0
纯js实现网页返回顶部功能(万能的兼容目前所有浏览器)
python自动化17-JS处理滚动条
    selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了。
py3study
2020/01/19
6.4K0
python自动化17-JS处理滚动条
js 做返回顶部效果
document.documentElement.scrollTop ==>> 非IE滚动的距离
全栈程序员站长
2022/09/14
11.8K0
js 做返回顶部效果
python自动化之JS处理滚动条
滚动条操作 浏览器滚动条并没有提供相应的操作方法。在这种情况下,就可以借助JavaScript也就是JS来控制浏览器的滚动条。 WebDriver提供了execute_script()方法来执行JavaScript代码。 js="window.scrollTo(100,450);" driver.execute_script(js) 当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见的。 这时候需要借助滚动条来拖动屏幕,使被操作的元素显示在当前的屏幕上。 滚动条是无法直接用定位工具来定位的。selenium里面也没有直接的方法去控制滚动条,这时候只能借助JS了,还好selenium提供了一个操作js的方法: execute_script(),可以直接执行js的脚本。 --scrollHeight 获取对象的滚动高度。 --scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。 --scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。 --scrollWidth 获取对象的滚动宽度。
Python研究者
2020/09/28
5.4K0
用HTML5-Canvas 写一个桌球游戏!
这只是一个简单的DEMO。游戏性、游戏规则没怎么考虑,如果有兴趣细化的朋友可以细化一下,比如细化一下规则,游戏开关,加个声音,细化一下进球检测,更严谨甚至可以去查下击球力度、桌面真实摩擦力等来把游戏弄的更像游戏。我只是给个编程思路,做一个DEMO而已,玩起来估计还是会很爽快的~~
用户5997198
2019/08/09
2K0
用HTML5-Canvas 写一个桌球游戏!
相关推荐
js滚动到页面顶部
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验