用Javascript實現回到頂部效果

時間 2019-11-17

原文原文鏈接

用Javascript實現回到頂部效果javascript

常常看到網頁中有回到頂部的效果，今天也研究一下回到頂部有哪些方法。衆所周知，用錨連接是實現回到最簡單的方法，可是從用戶體驗效果來講，並非最好的。（錨連接回到頂部時太快了，並且用戶可能在看到某個感興趣的東西想停下來，卻停不下來），針對上面的缺點，咱們試着用Javascript的方法來獲得實現。思路是這個樣子的：css

一、首先用html和css構建基本的例子，代碼以下html

html部分：
		<div class="box">
			<img src="1.jpg"/>
		</div>
		<a href="javascript:;" id="btn" title="回到頂部"></a>
		
css部分：
		.box { width: 1190px; margin: 0 auto; }
		#btn{ width: 40px; height: 40px; background-color: red; position: fixed; right: 0px; bottom: 60px; background: url(2.jpg) no-repeat left top; }
		#btn:hover{ background: url(2.jpg) no-repeat left -40px; }

在這裏應該注意的是：href="javascript:;"的目的是爲了阻止瀏覽器默認行爲。java

二、下面咱們就能夠用Javascript來控制咱們的例子瀏覽器

　　a、首先模仿錨連接回到頂部的效果，代碼以下：函數

window.onload  = function(){
	var obtn = document.getElementById('btn');
	obtn.onclick = function(){				
		var osTop = document.documentElement.scrollTop || document.body.scrollTop;
		document.documentElement.scrollTop = document.body.scrollTop = -200;						
	};
}

　　這裏的效果爲，鼠標每點擊一次，向上移動200像素（200像素是能夠變化的），而後咱們發現每次都要點擊以爲很麻煩，這裏咱們不妨爲它添加一個定時器函數url

　　b、添加定時器函數，代碼以下：spa

var timer = null;//在前面聲明
timer = setInterval(function(){},30);//裏面接的是移動200px效果

　　在這裏，咱們以爲還不是那麼的好，好比說「別人家」的效果距離頂部越近的時候，速度越慢；而且咱們中間還有一個問題就是回到頂部以後，在想繼續往下看時不會繼續往下了。htm

　　c、清除定時器效果並控制回到頂部的速率，代碼以下：blog

//改變回到頂部的速度
var isSpeed = Math.floor(-osTop/6)
document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;
//清除定時器效果
if(osTop == 0){
	clearInterval(timer);
}

　　到這裏，咱們的效果差很少完成了，可是仍是不能在滾動條滾動的時候，看到感興趣的內容停下來。

　　d、滾動條滾動即停，代碼以下：

var isTop = true;//先聲明

//滾動條滾動時觸發				
window.onscroll = function(){
					
	if(!isTop){
		clearInterval(timer);
	}
	isTop = false;
};

isTop = true;//添加在obtn.onclick事件的timer中

　　到這裏，咱們還有一點小小的地方能夠改動，就是當在可視窗口中，回到頂部是不出現的，到達必定值後纔出現

　　e、回到頂部的顯示與隱藏，代碼以下：

/*在css中添加以下代碼：*/
#btn{display: none;}

//獲取頁面的可視窗口高度
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

/*在window.onscroll中添加以下代碼，控制顯示與隱藏*/
//在滾動的時候增長判斷
var osTop = document.documentElement.scrollTop || document.body.scrollTop;//特別注意這句，忘了的話很容易出錯
if (osTop >= clientHeight) {
	obtn.style.display = 'block';
}else{
	obtn.style.display = 'none';
}

　　這樣，回到頂部的效果就實現了，咱們在看下完整的代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Javascript 回到頂部效果</title>
		<style type="text/css">
			#btn {
				width: 40px;
				height: 40px;
				position: fixed;
				display: none;
				right: 0px;
				bottom: 30px;
				background: url(2.jpg) no-repeat left top;
			}
			
			#btn:hover {
				background: url(2.jpg) no-repeat 0 -40px;
			}
			
			.box {
				width: 1190px;
				margin: 0 auto;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<img src="1.jpg" />
		</div>
		<a href="javascript:;" id="btn" title="回到頂部"></a>
				
		<script type="text/javascript">
			window.onload = function() {
				var obtn = document.getElementById('btn');
				var timer = null;
				var isTop = true;
				//獲取頁面的可視窗口高度
				var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

				//滾動條滾動時觸發
				window.onscroll = function(){
					//在滾動的時候增長判斷
					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;
				};


				btn.onclick = function(){

					//設置定時器
					timer = setInterval(function(){
						//獲取滾動條距離頂部的高度
						var osTop = document.documentElement.scrollTop || document.body.scrollTop;	//同時兼容了ie和Chrome瀏覽器
						
						//減少的速度
						var isSpeed = Math.floor(-osTop / 6);
						document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;
						//console.log( osTop + isSpeed);

						isTop = true;

						//判斷，而後清除定時器
						if (osTop == 0) {
							clearInterval(timer);
						}
					},30);
					
					
					
				};
			}
		</script>
	</body>

</html>

　　到這裏，還要小結一下，在中間咱們運用的知識點：

知識點回顧：

DOM：
	一、document.getElementById()
	二、document.documentElement.scrollTop
	三、document.body.scrollTop
事件：
	一、window.onload
	二、window.onscroll
	三、obtn.onclick
定時器的使用：
	一、setInterval(function(){},30)
	二、clearInterval(timer)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。