JavaScript實作回到頂部效果的範例-js教程-PHP中文網

JavaScript實作回到頂部效果的範例

黄舟

發布： 2017-11-16 16:30:04

原創

1447 人瀏覽過

在我們開發工作中，JavaScript可謂是必不可少的一部分，我們會時常遇到使用JavaScript實作回到頂部的程式碼，相信每個頁面都會有的功能，今天就跟大家詳細介紹下JavaScript實作回到頂部效果的範例！

使用原生js實作簡單的回到頂部效果。需求比較明確：1.顯示與隱藏按鈕。 2.中途再次觸發onscroll清除定時器（暫時未實現，希望各位賜教）

##代碼：

<!-- 
Time:2016.8.4
author:Joel

Dom操作
1.document.getElementById    根据ID获取标签元素
2.document.documentElement.scrollTop    .ie滚动条数值
3.document.body.scrollTop  .chrome
4.document.documentElement.clientHeight  可视区域高度

事件运用
1.window.onload  加载完毕触发事件
2.onclick  点击触发事件
3.window.scroll  滚动条触发事件

定时器
1.setInterval()
2.clearInterval() 
-->

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.btn:hover{
			background: blue;
		}
		.btn{
			display: none;
			height: 40px;
			width: 40px;
			background: red;
			position: fixed;
			left: 1410px;
			top: 600px;
		}
		.image{
			width: 1190px;
			margin:0 auto;
		}
	</style>
	<script type="text/javascript">
	      window.onload = function(){
		  var myBtn = document.getElementsByClassName("btn");
		  var clientHeight = document.documentElement.clientHeight;
          var timer = null;

		  window.onscroll = function(){
		  	var osTop = document.documentElement.scrollTop || document.body.scrollTop;

		  	if(osTop > clientHeight){
		  		myBtn[0].style.display = "block";
		  	}
		  	else{
		  		myBtn[0].style.display = "none";
		  	}
		    }
		    myBtn[0].onclick = function(){
		  	clearInterval(timer);
		  	timer = setInterval(function(){
              var osTop = document.documentElement.scrollTop || document.body.scrollTop;
              var spd = Math.floor((-osTop) / 1000);

              document.documentElement.scrollTop = osTop + spd;
              document.body.scrollTop = osTop + spd;

              if(osTop == 0){
              	clearInterval(timer);
              }
		  	},30);
		  }
	    }
	</script>
</head>
<body>
	<a href="javascript:;" class="btn">按钮</a> 
	<p class="image">
	  <img src="tb_bg.jpg" alt="">
	</p>
</body>
</html>

登入後複製

總結：
#1.dom流的渲染順序，hover寫在a之前才會生效，否則會被覆蓋。

2.各種屬性方法的運用與簡單的封裝。

3.getElementsByClassName 回傳的是nodelist 所以要使用陣列的形式。

4.不同瀏覽器下的相容問題，放棄tab鍵的依賴性，並使用兩個空格來代替。

5.emmet外掛程式的安裝與使用。

6.jq提供的動畫能更簡單的實現回到頂部效果。錨點法在某些特定場合也可以使用，問題是會在瀏覽器輸入欄顯示某些細節。

相關推薦:

JS實作回到頂部特效

JS 捲動事件window.onscroll與position：fixed寫入相容IE6的回到頂部元件

#javascript - iframe外怎麼讓iframe的內容回到頂部

以上是JavaScript實作回到頂部效果的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！