详解原生JS回到顶部


Posted in Javascript onMarch 25, 2019

第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS的回到顶部。

HTML代码:

<div class="container">
	<p>你好哇</p>
	...
</div>
<div id="top">回到顶部</div>

CSS代码:

.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代码:

//创建变量
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回到顶部

以上所述是小编给大家介绍的JS回到顶部详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Json和Jsonp理论实例代码详解
Nov 15 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
bootstrap table实例详解
Jan 06 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
详解Vue前端对axios的封装和使用
Apr 01 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
vue分页插件的使用方法
Dec 25 Javascript
微信小程序实现购物车功能
Nov 18 Javascript
javascript验证form表单数据的案例详解
Mar 25 #Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 #Javascript
详解javascript函数写法大全
Mar 25 #Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 #Javascript
Node.js之readline模块的使用详解
Mar 25 #Javascript
Javascript的this详解
Mar 23 #Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 #Javascript
You might like
一篇不错的PHP基础学习笔记
2007/03/18 PHP
php微信开发之百度天气预报
2016/11/18 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
javascript学习之json入门
2016/12/22 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python lambda函数及三个常用的高阶函数
2020/02/05 Python
简单了解如何封装自己的Python包
2020/07/08 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
测绘工程专业个人自我评价
2013/12/01 职场文书
银行实习的自我鉴定
2013/12/10 职场文书
秋季运动会活动方案
2014/02/05 职场文书
体育运动会广播稿
2014/10/05 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
MySQL 分页查询的优化技巧
2021/05/12 MySQL
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
使用springMVC所需要的pom配置
2021/09/15 Java/Android
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python