用javascript实现回到顶部效果

最新推荐文章于 2024-09-08 16:45:30 发布

有只猫七

最新推荐文章于 2024-09-08 16:45:30 发布

阅读量1.5k

点赞数 2

分类专栏： javascript/jQuery/Ajax 文章标签：前端 javascript 回到顶部

本文链接：https://blog.csdn.net/qq_34954786/article/details/78146270

版权

javascript/jQuery/Ajax 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

主要知识点：

DOM操作：1，document.getElementById() 根据id获取标签元素

2，document.documentElement.scrollTop 滚动条的数值，可读写

事件运用：1，window.onload() 页面加载完毕后触发

2，onclick() 点击后触发

3，window.onscroll 滚动条滚动时触发

定时器： 1，setInterval() 设置定时器，需要传两个参数

2，clearInterval() 关闭定时器，需要传一个参数

梳理：获取按钮，加一个事件，获取滚动事件

1，totop.js

window.οnlοad=function(){
	var btn=document.getElementById('totop');
	//timer需要放在最外面
	var timer=null;
	var istop=true;
	//屏幕可视化高度
	var clientHeight=document.documentElement.clientHeight;
	//设置向上滚动时候突然往下翻的事件,注意要加window.onscroll
	window.οnscrοll=function(){
		if(!istop){
			clearInterval(timer);
		}
		istop=false;
		//这里需要再申明一遍high的值，否则获取不到下面已经申明的值，因为Js是从上向下执行代码
		var high=document.documentElement.scrollTop||document.body.scrollTop;
		if(high>=clientHeight){
			btn.style.display='block';
		}else{
			btn.style.display='none';
		}
	}
	btn.οnclick=function(){
		//设置定时器，在30ms之内完成回到顶部的平滑效果
		timer=setInterval(function() {
		//解决各个浏览器的兼容性问题
		//获得的这个high必须写在点击事件里面，因为js是从上往下执行代码
		var high=document.documentElement.scrollTop||document.body.scrollTop;
		//设置向上的速度，由快到慢，并且取负数整，这样可以为0，让定时器关闭
		var speed=Math.floor(-high/6);
		document.documentElement.scrollTop=document.body.scrollTop=high+speed;
		//向上滚动突然停止的变量一开始设为true,并且放在点击事件里面
		istop=true;
		if(high==0){
			clearInterval(timer);
		}
		},30);
	
		
	}
}

2,totop.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="GBK">
		<title></title>
		<link href="//at.alicdn.com/t/font_378311_yebd9tiaj6lgnwmi.css" rel="stylesheet" type="text/css" />
		<!--
			必须要全写
		<script type="text/javascript" src="js/totop.js" />-->
		<script type="text/javascript" src="js/totop.js"></script>
    <style>
    	*{
    		margin: 0;
    		padding: 0;
    	}
    	.main{
    		width: 800px;
    		margin: 0 auto;
    		
    	}
    	.main img{
    		width: 100%;
    	}
    	.totop{
    		position: fixed;
    		width: 48px;
    		height: 48px;
    		background: rgba(0,0,0,0.7);
    		left: 50%;
    		margin-left: 610px;
    		bottom: 10px;
    		z-index: 111111;
    		display: none;
    	}
    	.totop .iconfont{
    		font-size: 45px;
    		color: white;
    	}
    </style>
	</head>
	<body>
		<div class="main"> <img src="img/tao.png"></div>
		<a href="javascript:;"><div class="totop" id="totop"><i class="iconfont icon-huidaodingbu"></i></div></a>
	</body>
</html>