原生js实现平滑滚动
在以前的项目中有用到,在此整理一下:
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实现平滑滚动的更多相关文章
- 原生js禁止页面滚动
// 开启.禁止页面滚动 bodyScroll: { e(e) { e.preventDefault();// 注意此处代码片段必须这样提出来已保证传入下边两个事件的处理程序一样才生效,分别写到事件处 ...
- js 实现文字滚动功能,可更改配置参数 带完整版解析代码。
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写文字滚动效果 需求分析: 需要 ...
- 原生js 平滑滚动到页面的某个位置
window.scrollTo() 语法1: window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标. y-coord 是文档中的纵轴坐标. 例子: w ...
- 原生js实现单屏滚动
类似于fullpage的单屏滚动,使用原生JS实现,不依赖任何js库: css: html,body {height:100%;} body {margin:0px;} div {height:100 ...
- js平滑滚动到顶部,底部,指定地方
[原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- js原生 + jQuery实现页面滚动字幕
js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...
- 页面中的平滑滚动——smooth-scroll.js的使用
正常的本页面锚链接跳转的时候跟PPT似的,特别生硬,用户体验非常差. 这时候我们就可以借助smooth-scroll.js这个插件,来实现本页面的平滑的跳转. 1首先,导入必须的JS文件 <sc ...
- 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
随机推荐
- MySQL数据连表查询思路
我们在网站开发中,涉及MySQL数据库查询时,常常需要将两个表或多个表联合起来进行查询数据,这就用到了MySQL中的JOIN函数. JOIN函数有三种,分别是: LEFT JOIN 左连接查询: 查 ...
- 最近javascript的学习小记
一.关于javascript的原型与隐式原型 1.prototype 首先function是一个对象,每一个function都具有一个prototype对象,prototype对象默认是{constr ...
- mybatis 在xml文件中获取当前时间的sql
在Service等地方获取当前时间: SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//设置日 ...
- webstorm2018.1 汉化
https://github.com/pingfangx/TranslatorX 这个百度云 选择webstorm 选择勾选的文件 选择你下载webstorm 的版本 我下载的是2018.1的 之后等 ...
- 应用shell脚本停启Tomcat
最近在工作中频繁的操作多个tomcat,顺便就简单研究了一下 一. 简介 Shell 是一种与操作系统直接交互的程序,Unix系统中叫Bourne Shell,包括以下几种 Sh—Bourne She ...
- vue框架构建项目流程
构建项目流程: 1.全局查询:node -v 2.全局初始化:npm install --global vue-cli 3.模块化工程:vue init webpack myapp--->y,n ...
- pyspider安装提示:got an unexpected keyword argument 'io_loop'的解决办法
此问题解决办法学习自pyspider的github的issues 原地址:https://github.com/binux/pyspider/issues/771 解决方法: 由于最新版的Tornad ...
- thinkPHP HTML输出多条查询结果
控制端 $select=M('Baojiao')->query("select * from think_Baojiao where COMPANY='$comname'") ...
- Objective-C Block与函数指针比较
相似点 1.函数指针和Block都可以实现回调的操作,声明上也很相似,实现上都可以看成是一个代码片段. 2.函数指针类型和Block类型都可以作为变量和函数参数的类型.(typedef定义别名之后,这 ...
- Ubuntu 16.04 安装垃圾清理工具 BleachBit
BleachBit 可以清理系统缓存文件, 清理磁盘垃圾. 首先下载最新版 deb安装包,默认下载到Downloads 中, 下载链接: https://www.bleachbit.org/downl ...