返回頂部效果

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函數