详解原生JS回到顶部
第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部。
HTML代码:
1
2
3
4
5
|
< div class = "container" > < p >你好哇</ p > ... </ div > < div id = "top" >回到顶部</ div > |
CSS代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.container{ border : 1px solid black ; } # top { position : fixed ; padding : 10px ; width : 20px ; border : 1px solid black ; box-shadow: 0 0 2px #333 ; right : 20px ; bottom : 20px ; } # top :hover{ cursor : pointer ; } |
JS代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
//创建变量 var scroll_Top = document.getElementById( 'top' ); //用最常用的scrollTop属性实现 var timer = null ; function scrollTop(){ // 取消一个通过调用requestAnimationFrame()方法添加到计划中的动画帧请求. cancelAnimationFrame(timer); /* requestAnimationFrame 会把每一帧中的所有DOM操作集中起来, 在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率 一般来说,这个频率为每秒60帧。 */ timer = requestAnimationFrame( function sTop(){ var top = document.body.scrollTop || document.documentElement.scrollTop; if (top > 0){ //使用定时器,将scrollTop的值每次减少20(自行设置),直到减少到0,则滚动完毕 document.body.scrollTop = document.documentElement.scrollTop = top - 20; timer = requestAnimationFrame(sTop); } else { cancelAnimationFrame(timer); } }); } scroll_Top.addEventListener( 'click' , scrollTop, false ); |
详解原生JS回到顶部的更多相关文章
- 原生js回到顶部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- JAVASCRIPT事件详解-------原生事件基础....
javaScirpt事件详解-原生事件基础(一) 事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...
- JQ的offset().top与JS的getBoundingClientRect区别详解,JS获取元素距离视窗顶部可变距离
壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...
- HTML滚动字幕代码参数详解及Js间隔滚动代码
html文字滚动代码 <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" dire ...
- 详解Vue.js 技术
本文主要从8个章节详解vue技术揭秘,小编觉得挺有用的,分享给大家. 为了把 Vue.js 的源码讲明白,课程设计成由浅入深,分为核心.编译.扩展.生态四个方面去讲,并拆成了八个章节,如下: 准备工作 ...
- Day04 dom详解及js事件
day04 dom详解 DOM的基础 Document对象 Element对象 Node对象 innerHTML 事件处理 表单验证 上次课内容回顾: JS中ECMAScript用法: JS定义变 ...
- js回到顶部------转载
[1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意] ...
- js回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS回到顶部代码小记
HTML: <div id="goTop"> <a href="#top"><img src="~/Content/th ...
随机推荐
- ubuntu14.04 安装lnmp + redis
1.更新源 apt-get install update 2.安装nginx : apt-get install nginx 配置nginx: ① cd /etc/sites-enabled/ ② v ...
- 10倍速!一招儿解决因googleapis被墙导致的许多国外网站访问速度慢的问题
1x.com 是我非常喜欢的一家国外的摄影网站.但,打开它的首页要1分多钟!点击小图看大图的二级页面根本打不开.看着写着“Nude content”的小图却点不开大图的心情你们造吗?!很多国外网站访问 ...
- [Swift]LeetCode982. 按位与为零的三元组 | Triples with Bitwise AND Equal To Zero
Given an array of integers A, find the number of triples of indices (i, j, k) such that: 0 <= i & ...
- Go使用Makefile构建
我们平常很多时候都是直接在命令行输入go build进行编译的: go build . 或者测试使用go run运行项目 go run main.go 我看有很多大型开源项目都是如下方式: mak ...
- tensorflow、cuda、cudnn之间的版本对应关系
原文链接 tensorflow-gpu v1.9.0 | cuda9.0 | cuDNN7.1.4可行 | 备注:7.0.4/ 7.0.5/ 7.1.2不明确 tensorflow-gpu v1. ...
- Python __new__ 实现单例模式 python经典面试题
话不多说,上代码 class Singleton(object): def __new__(cls, *args, **kwargs): if not hasattr(cls, '_instance' ...
- 1.Django安装与运行
Django基本配置 Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Se ...
- BBS论坛(二十)
20.1.cms添加轮播图后台逻辑代码完成 (1)apps/models.py from exts import db from datetime import datetime class Bann ...
- windows部署MongoDB
打开MongoDb下载页面,分别下载Community Server和Compass,注意在安装Community Server时可以勾选同时安装Compass,但会比较慢,所以建议两个分开下载安装. ...
- 从零开始学习PYTHON3讲义(一)认识Python
课程名称 从零开始PYTHON3 课程长度 15讲 适用年龄 15-20岁(初三-大一) 本讲名称 认识Python 时长 90分钟 教学内容分析 Python是时下最流行的计算机编程语言之一.本课程 ...