详解原生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 相关文章推荐
javascript options属性集合操作代码
Dec 28 Javascript
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
jquery中键盘事件小结
Feb 24 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
JS回调函数深入理解
Oct 16 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
使用GD库生成带阴影文字的图片
2015/03/27 PHP
php中define用法实例
2015/07/30 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
jquery 插件开发方法小结
2009/10/23 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
Random 在 Python 中的使用方法
2018/08/09 Python
python处理excel绘制雷达图
2019/10/18 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
python实现数字炸弹游戏程序
2020/07/17 Python
HTML5 Web 存储详解
2016/09/16 HTML / CSS
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
致标枪运动员加油稿
2014/02/15 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
合同审查法律意见书
2015/06/04 职场文书
课程设计感想范文
2015/08/11 职场文书
box-shadow单边阴影的实现
2023/05/21 HTML / CSS