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

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. JQuery拖拽元素改变大小尺寸

    <!DOCTYPE html><html> <head> <title></title> <style type="text ...

  2. BestSync多终端文件资料同步利器

    分享一款多终端文件同步的强力软件,windows下使用. 我这里的多终端意思是,多台电脑.移动存储.云端. 就我个人而言,实用性在于移动硬盘和电脑上都有的文件,比如保存项目资料,电脑上需要编辑,有时外 ...

  3. 深圳共创力咨询《成功的产品经理DNA》公开课3月29~30日在深圳开课!

    课时:13小时(2天)    成功的产品经理DNA   讲师: 冯老师 时间:2019.03.29~30 举办单位:深圳市共创力企业管理咨询有限公司 举办地点:深圳 [课程背景] 当今时代,供过于求. ...

  4. 【English】十、"谓语的地方"看到有两个动词:I go say hello.、非谓语形式

    一.I go say hello. 这是一种偏口语的说法.一个句子中不能同时有两个谓语. 标准的用法有: I go and say hello. and 连接这两个动词,表示并列等关系.go and ...

  5. MyDAL - .UpdateAsync() 之 .Set() 使用

    索引: 目录索引 一.API 列表 1.Set<M, F>(Expression<Func<M, F>> propertyFunc, F newVal) 如: .S ...

  6. 简说Python生态系统的14年演变

    [导语]Python 里各种丰富的标准库.第三方库和模块成为其广受欢迎的原因之一.而 PyPI 就是大家想第三方库前先要安装的一个仓库.作为使用者,它可以帮我们查找 Python 社区开发和共享的软件 ...

  7. 根据Webservice地址,动态传入参数(Webservice代理类)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sunlib; ...

  8. CynosDB技术详解——架构设计

    本文由腾讯云数据库发表 前言 CynosDB是新一代分布式数据库,100%兼容MySQL和PostgreSQL,支持存储弹性扩展,一主多从共享数据,性能更是超越社区原生MySQL和PostgreSQL ...

  9. 吴军武志红万维刚薛兆丰何帆曾鸣李笑来罗永浩等得到APP专栏作者的书3

    整理了一下最近两三年内看过的得到APP专栏与课程作者的得到精选文集和他们写过的书共本.新增吴军1本,武志红1本. 其中:武志红3本,熊太行1本,薛兆丰2本,吴军4本,何帆3本,曾鸣2本,万维刚1本,李 ...

  10. java 浅复制 代码

    1  类实现Cloneable接口 2  重写clone()方法 3  类变量引用类型无法复制 class Dog extends Pet implements Cloneable{ int c; i ...