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

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. SpringAOP(5)

    2019-03-08/14:22:58 演示:登陆核心业务类与日志周边功能实现AOP面向切面思想 jar包:https://share.weiyun.com/5GOFouP 学习资料:http://h ...

  2. su和sudo的区别

    首先来说一下su 然后是sudo

  3. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  4. 创建一个Windows服务程序与实现定时器效果

    1.创建一个Windows服务程序 一.   新建Window服务项目 二.   添加安装程序 三.   配置服务属性 四.   编写定时器代码 publicpartialclassService1 ...

  5. zabbix配置邮件告警

    1.安装邮件服务 yum -y install mailx @qq.com #发邮件测试 2.添加报警媒介 输入接收告警邮件的邮箱 3.配置SMTP服务端 使用本机作为SMTP服务器 4.创建触发器 ...

  6. linux 系统shell运行程序不退出

    如果通过ssh远程连接到linux系统终端,在shell下执行程序.假如程序名称为app,且程序本身会一直执行不退出,程序执行需要参数文件paramfile. 当我们用 ./app paramfile ...

  7. 「汇编」加深理解段地址*10H(*16)必须是16的倍数

    王爽的汇编语言,有这样一道题: 检测点2.2 (2)  有一数据存放在内存20000H单元中,现给定段地址为SA,若想用偏移地址寻到此单元.则SA应满足的条件是:最小为         , 最大为   ...

  8. oracle 关于对时间操作的汇总

    -- 对时间的操作 对当前日期增加一个小时: SQL> select sysdate, sysdate+numtodsinterval(1,’hour’) from dual ; 对当前日期增加 ...

  9. 微信h5支付

    分为 微信内H5调起支付 和 非微信浏览器H5支付. 1.H5支付(微信内) 参考链接:https://www.jianshu.com/p/6b9acdd10de6 2.JSAPI支付(非微信) 参考 ...

  10. 使用栈实现队列(1)(Java)

    class MyQueue { private Stack s1; private Stack s2; public MyQueue(int size) { this.s1 = new Stack(s ...