在以前的项目中有用到,在此整理一下:

html部分

<span id="gotop">回到顶部</span>

JS部分

// 使用requestAnimationFrame代替setTimeout
// requestAnimationFrame随显示器刷新一帧而执行一次函数,更精确
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (fn) {
return setTimeout(fn, 17);
};
} let target = document.querySelector("#gotop"); target.onclick = function(){
timer = requestAnimationFrame(function(){
     // 页面滚动的距离
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  // 控制滚动速率
  let speed = Math.floor(-scrollTop / 6);
    if(scrollTop < 1){
if (window.cancelAnimationFrame) {
window.cancelAnimationFrame(timer)
} else {
clearInterval(timer);
} 
    document.documentElement.scrollTop = document.body.scrollTop = scrollTop + speed;
  })
}
window.cancelAnimationFrame(aid);

原生js实现平滑滚动的更多相关文章

  1. 原生js禁止页面滚动

    // 开启.禁止页面滚动 bodyScroll: { e(e) { e.preventDefault();// 注意此处代码片段必须这样提出来已保证传入下边两个事件的处理程序一样才生效,分别写到事件处 ...

  2. js 实现文字滚动功能,可更改配置参数 带完整版解析代码。

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写文字滚动效果 需求分析: 需要 ...

  3. 原生js 平滑滚动到页面的某个位置

    window.scrollTo() 语法1:  window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标. y-coord 是文档中的纵轴坐标. 例子: w ...

  4. 原生js实现单屏滚动

    类似于fullpage的单屏滚动,使用原生JS实现,不依赖任何js库: css: html,body {height:100%;} body {margin:0px;} div {height:100 ...

  5. js平滑滚动到顶部,底部,指定地方

    [原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...

  6. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  7. js原生 + jQuery实现页面滚动字幕

    js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...

  8. 页面中的平滑滚动——smooth-scroll.js的使用

    正常的本页面锚链接跳转的时候跟PPT似的,特别生硬,用户体验非常差. 这时候我们就可以借助smooth-scroll.js这个插件,来实现本页面的平滑的跳转. 1首先,导入必须的JS文件 <sc ...

  9. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

随机推荐

  1. Python机器学习实践:决策树判别汽车金融违约用户

    文章发布于公号[数智物语] (ID:decision_engine),关注公号不错过每一篇干货. 转自 | 法纳斯特(公众号ID:walker398) 作者 | 小F 决策树呈树形结构,是一种基本的回 ...

  2. 都 9012了,该选择 Angular、React,还是Vue?

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 尽管 Web开发的典型应用场景除了将服务器用作平台.浏览器用作客户端之外,几乎很少活跃于其他业务领域,但不可 ...

  3. 生鲜配送管理系统_升鲜宝V2.0 价格组功能 操作说明_15382353715

    价格组功能是B端供应链系统,必不可少的一个功能,其主要实现不同的客户不同的价格,B端系统有一个最大的不同就是,有些商品后台下单人员能看到的.有些商品在销售的那一瞬间,还不知道价格.所以这些商品只有后台 ...

  4. Openlayer 3加载本地ArcGIS切片

    第一篇博客,简单的开个头吧.希望自己能坚持记录.一般什么情况什么人需要这样的需求呢,伐木的光头强大哥说我们在深山老林里,没网的啊,地图就手机本地duang的加载一下吧.那么Server啊就要丢掉丢掉. ...

  5. js实现自定义修改网页中表格信息

    项目中的打印页面,为提高用户体验,需要增自定修改表格内容的功能,以下是使用示意图(双击td标签部分的内容,可自定义修改): 以下是js插件源码,存为edit.js文件: var tbl, tbt; v ...

  6. 项目案例【Net Core】如何注入多个服务实现类

    需求 库表保存时,需要校验逻辑. 提交时有更深层次校验. **状态,还有特殊校验 接口 写一个通用的校验接口,这里定义了校验时间.每个阶段校验可能需要考虑顺序,增加一个顺序字段. public int ...

  7. C# Dictionary 函数解析及使用方法

    要使用Dictionary集合,需要导入C#泛型命名空间 System.Collections.Generic(程序集:mscorlib)  Dictionary的描述 1.从一组键(Key)到一组值 ...

  8. REST教程

    REST教程 越来越多的人开始意识到,网站即软件,而且是一种新型的软件.这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high late ...

  9. 任意N个不同数的逆序对平均值

    在学习数据结构的时候看到了以下定理: 但是老师并没有解释,本着钻研的精神决定搞清楚为什么是这个数. 在百度 google一番之后并没有找到,决定自己试着证明. 最开始走了一些弯路,但突然灵光一闪很容易 ...

  10. kafka消息会不会丢失

    转载:https://baijiahao.baidu.com/s?id=1583469327946027281&wfr=spider&for=pc 消息发送方式 想清楚Kafka发送的 ...