原生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图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
随机推荐
- [C#学习笔记1]用csc.exe和记事本写一个C#应用程序
csc.exe是C#的命令行编译器(CSharpCompiler),可以编译C#源程序成可执行程序.它与Visual Studio等IDE(Integrated Development Environ ...
- Salesforce的对象关系
对象关系 Salesforce中的对象关系和一般的关系数据库不同. 在关系数据库中对象间的关系是由主键.外键等加以定义.而在Salesforce中,对象之间的关系是由自定义字段来确定. 这么做的原因是 ...
- Fragment嵌套Fragment时候。子类fragment调用父容器Fragment方法
业务场景:有的时候我们的页面可能是Activity 嵌套多个Fragment ..其中某个Fragment 又嵌套多个Fragment. 其中某个子Fragment 定义为 NewsFragmen ...
- python-对requests请求简单的封装
# coding:utf-8 import requests class send_request: def __init__(self,url,method,data=None): self.res ...
- 运算符和Scanner的使用
一 1.运算符:对常量或者变量进行操作的符号 2.算术运算符: 1)四则运算:+ - * / 2)取模运算:%(只看余数) 3)字符串连接:任何数据类型和字符串连在一起,都是字符串结果(+来连接) 4 ...
- about-php
鉴于本人收集的php资料多,感觉查询起来不怎么方便.特意在github上建立了一个分支:about-php 主要是介绍围绕php的相关资料,包括php入门知识,php框架,开发工具,php项目,php ...
- RocketMQ4.3.x 史上配置最全详解,没有之一
最近整理了RocketMQ的配置参数一部分参考rocketmq技术内幕,一部分自己看源码猜测,有表述不清楚或不正确请广大网友指正 这里应该是最全的配置解析了,搞了2天.以后查询就好办了,仅此贡献给广大 ...
- 为什么区块链和加密行业需要 Web 3?
为什么区块链和加密行业需要 Web 3? “由于人们都想从互联网上获得好处,互联网已经演变成了一个导致不公平和分裂的引擎,它被强大的力量所支配,并且任由其摆布.“——万维网之父.互联网先驱 Tim B ...
- nginx配置文件详细解读
https://m.w3cschool.cn/nginx/nginx-d1aw28wa.html ######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户 ...
- 性能测试中TPS上不去的几种原因浅析
转:https://www.cnblogs.com/imyalost/p/8309468.html 下面就说说压测中为什么TPS上不去的原因: 1.网络带宽 在压力测试中,有时候要模拟大量的用户请求, ...