原生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图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
随机推荐
- Python 强制停止多线程运行
强制停止多线程运行 by:授客 QQ:1033553122 #!/usr/bin/env python # -*- coding:utf-8 -*- __author__ = 'shouke' ...
- 30号快手笔试(三道ac两道半)————-历史上最大的网络失误orz
case 50 ,20,100 做题以来第一次重大失误:最后两分钟发现手机关机了,然后充电开机orz 页面是js代码, 钟表是一直会走的, 手机没电了, 电脑连接的手机的热点: 只顾在调试,先过了第 ...
- 【English】十、"谓语的地方"看到有两个动词:I go say hello.、非谓语形式
一.I go say hello. 这是一种偏口语的说法.一个句子中不能同时有两个谓语. 标准的用法有: I go and say hello. and 连接这两个动词,表示并列等关系.go and ...
- 『Shell编程』学习记录(2)
例1.文件io #include <stdio.h> #include <sys/types.h> #include <sys/stat.h> #include & ...
- js 判断元素(例如div)里的数据显示不全(数据长度大于元素长度)
//判断div里元素是否超出长度,true 超出,false 没有 dom=document.getElementById('id');function isEllipsis(dom) { va ...
- 【视频】设计模式(Java)视频讲解
设计模式(JAVA) 视频网址: http://www.qghkt.com/ 设计模式(JAVA)视频地址: https://ke.qq.com/course/318643?tuin=a508ea62 ...
- C语言面试基础知识整理
一.预处理 1.什么是预编译?何时需要预编译? (1)预编译又称预处理,是做些代码文本的替换工作,即程序执行前的一些预处理工作.主要处理#开头的指令,如拷贝#include包含的文件代码.替换#def ...
- Linux下安装Nginx并配置一个图片服务器
首先安装nginx安装环境 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. gcc 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没 ...
- jQuery中$.each()方法的使用
$.each()是对数组,json和dom结构等的遍历,说一下他的使用方法吧. 1.遍历一维数组 var arr1=['aa','bb','cc','dd']; $.each(arr1,functio ...
- day 21 垃圾回收机制、标记删除及分代回收
垃圾回收机制 # 不能被程序访问到的数据,就称之为垃圾 引用计数 # 引用计数是用来记录值的内存地址被记录的次数的# 每一次对值地址的引用都可以使该值的引用计数 +1# 每一次对值地址的释放都可以使 ...