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

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. 在VS 2017 下创建 Xamarin NuGet Package

    最近在做一个Xamarin for android的项目,有个需求是一次可以从相册中选择多张图片,但是 android API<19 的版本还不支持一次选择多张图片,在网上找了一下,发现原生的组 ...

  2. Android - 文字向上翻滚效果的实现

    本文转载https://xwc2013.iteye.com/blog/1976051 今天看到了一种文字翻滚的效果,感觉非常实用.所以就自己试着做出了这种效果,现在把它分享给大家! 首先在res目录下 ...

  3. Java的SSH框架整合

    写了好多篇的Android代码了,在写几篇关于Java的,博客园里肯定都是java的前辈啊,写的不好多给意见. SSH,什么是SSH呢,Struts+Spring+Hibernate,这三个就是整个的 ...

  4. 查看SQL Server服务运行帐户和SQL Server的所有注册表项

    查看SQL Server服务运行帐户和SQL Server的所有注册表项 SELECT * FROM sys.dm_server_registry SELECT * FROM sys.dm_serve ...

  5. 【spring源码分析】IOC容器初始化(四)

    前言:在[spring源码分析]IOC容器初始化(三)中已经分析了BeanDefinition注册之前的一些准备工作,下面将进入BeanDefinition注册的核心流程. //DefaultBean ...

  6. 03 前端篇(JS)

    参考博客:http://www.cnblogs.com/yuanchenqi/articles/5980312.html JavaScript包括三部分: ECMAScript.DOM.BOM Jav ...

  7. Pandas 数据清洗常用篇

    一.缺失值 sklearn中的preprocessing下有imputer,可进官方文档参考.这里主讲pandas. 拿到数据,一般先检查是否有缺失值,用isnul()或notnull(). 再决定d ...

  8. .NET方法无限传参数技术

    是否有这样的需求在创建函数时参数个数不固定,又不想使用重载,那么下面这个技术就比较适合. 相信你一定见过下面这的代码: ); Format 就是string的一个函数,第一个参数是固定的字符串类型,那 ...

  9. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

  10. 11 Django RESTful framework 实现缓存

    01-安装 pip install drf-extensions 02-导入 from rest_framework_extensions.cache.mixins import CacheRespo ...