返回顶部效果

2024-04-27 15:13:35

字体：大中小

来源：转载

供稿：网友

主要知识点：

1、var osTop = document.documentElement.scrollTop || document.body.scrollTop;滚动条的数值，即获取滚动条距离页面顶部的高度（兼容各浏览器）

2、var clientHeight = document.documentElement.clientHeight;获取页面可视区域的高度

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

4、setInterval() 设置定时器,需传两个参数，第一个是执行的函数，第二个是间隔时间

clearInterval()清除定时器，需传一个参数，即定时器赋值的变量

<!DOCTYPE html><html>	<head>		<meta charset="utf-8" />		<title></title>		<style type="text/CSS">			img {				margin-top: 100px;			}						#backTop {				position: fixed;				right: 10px;				bottom: 10px;				cursor: pointer;				width: 50px;				height: 50px;				line-height: 50px;				text-align: center;				transition: all .3s ease-in-out;				-o-transition: all .3s ease-in-out;				-ms-transition: all .3s ease-in-out;				-moz-transition: all .3s ease-in-out;				-webkit-transition: all .3s ease-in-out;				display: none;			}						#backTop span {				color: #042376;				font-size: 2em;			}						#backTop:hover {				background: #042376;			}						#backTop:hover span {				color: #fff;			}		</style>		<link rel="stylesheet" type="text/css" href="font_l6yr9chdy2yphkt9/iconfont.css" />	</head>	<body>		<img src="img/ChMkJliEUgWIGWy8AAWUH9AG9zMAAZe7gPRREkABZQ3007.jpg" />		<br />		<img src="img/ChMkJliEUgWIGWy8AAWUH9AG9zMAAZe7gPrREkABZQ3007.jpg" />		<img src="img/ChMkJliEUgWIGWy8AAWUH9AG9zMAAZe7gPrREkABZQ3007.jpg" />		<div id="backTop">			<span class="iconfont"></span>		</div>		<script type="text/javascript">			window.onload = function() {				backTop();			}			function backTop() {				//这里obtn，clientHeight，isTop没用var，所以是全局变量，为了在onScroll函数中也可以使用				obtn = document.getElementById("backTop");				//获取页面可视区域的高度				clientHeight = document.documentElement.clientHeight;				var timer = null;				isTop = true; //isTop为false时清除定时器				//滚动滚轮时触发				//				window.onscroll = function() {				//									//				}				addScrollEvent(onScroll); //为了不影响其他scroll事件				obtn.onclick = function() {					//设置定时器					timer = setInterval(function() {						isTop = true; //写在前面，ie78下就可以运行						//获取滚动条距离顶部的高度						var osTop = document.documentElement.scrollTop || document.body.scrollTop;						var ispeed = Math.ceil(osTop / 6);						document.documentElement.scrollTop = document.body.scrollTop = osTop - ispeed;						if(osTop == 0) {							clearInterval(timer);						}					}, 30)				}			}			function onScroll() {				var osTop = document.documentElement.scrollTop || document.body.scrollTop;				//当滚动条数值超过可视区域高度，按钮显示，否则隐藏				if(osTop >= clientHeight) {					obtn.style.display = 'block';				} else {					obtn.style.display = 'none';				}				if(!isTop) {					clearInterval(timer);				}				isTop = false;			}			function addScrollEvent(func) {				var oldonload = window.onscroll;				if(typeof window.onscroll != "function") {					window.onscroll = func;				} else {					window.onscroll = function() {						oldonload();						func();					}				}			}		</script>		<script type="text/Javascript" src="js/new_file.js"></script>	</body></html>做了很大改进：
1、把backTop函数封装，不把函数内容放在onload里
2、封装了addScrollEvent函数，用addScrollEvent函数追加一个onscroll事件，能够做到不影响页面原来的其他onscroll效果
3、因为onScroll()函数已封装，故里面用到的变量，都需在声明处写为全局变量，这样作用域才能覆盖onScroll函数