JavaScript--返回頂部方法:錨鏈接、行內式js寫法、外鏈式、內嵌式
阿新 • • 發佈：2017-10-25
文檔 click animate ref mar ppi nbsp window padding
返回網頁頂部方法
一.錨鏈接
simpleDemo:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 #father{13 width: 400px; 14 height: 5000px; 15 border:1px solid #000; 16 } 17 #son{ 18 width: 600px; 19 height: 5000px; 20 background: linear-gradient(45deg ,red,yellow,green,cyan,blue); 21 } 22 </style> 23 </head> 24<body> 25 26 <div id="top">我是可愛的頂部</div> 27 <div id="father"> 28 <div id="son"></div> 29 </div> 30 <a href="#top">返回頂部</a> 31 </body> 32 </html> 33 <script> 34 35 </script>
二.JS實現返回頂部
1 <!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 #father{ 13 width: 400px; 14 height: 5000px; 15 border:1px solid #000; 16 } 17 #son{ 18 width: 600px; 19 height: 5000px; 20 background: linear-gradient(45deg ,red,yellow,green,cyan,blue); 21 } 22 23 </style> 24 <script> 25 window.onload = function () { 26 var toTop = document.getElementById(‘toTop‘); 27 toTop.onclick = function () { 28 // window要通過函數scrollTo(x,y) 設置滾動到文檔中某個坐標 29 window.scrollTo(0,0); 30 console.log(window); 31 } 32 } 33 </script> 34 </head> 35 <body> 36 <div id="top">我是可愛的頂部</div> 37 <div id="father"> 38 <div id="son"></div> 39 </div> 40 <a href="javascript:;" id="toTop">返回頂部</a> 41 <!--行內式--> 42 <!--<a href="javascript:window.scrollTo(0,0);" id="toTop">返回頂部</a>--> 43 </body> 44 </html>
三.行內式返回頂部
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 #father{ 13 width: 400px; 14 height: 5000px; 15 border:1px solid #000; 16 } 17 #son{ 18 width: 600px; 19 height: 5000px; 20 background: linear-gradient(45deg ,red,yellow,green,cyan,blue); 21 } 22 23 </style> 24 <script> 25 /** 26 * 平常項目中不推薦使用行內式寫法添加事件 27 * 28 * 由於返回頂部功能是簡單唯一的，所以寫到行內式反而比較方便 29 * */ 30 </script> 31 </head> 32 <body> 33 <div id="top">我是迷人的頂部</div> 34 <div id="father"> 35 <div id="son"></div> 36 </div> 37 <!--行內式--> 38 <a href="javascript:window.scrollTo(0,0);" id="toTop">返回頂部</a> 39 </body> 40 </html>
四.內嵌式返回頂部
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .box{ 8 height: 2000px; 9 width: 100px; 10 background: deeppink; 11 } 12 </style> 13 </head> 14 <body> 15 <div class="box">我是可惡的頂部</div> 16 <!--方法一--> 17 <a onclick="fn()" href="javascript:;" id="btn">按鈕</a> 18 <!--方法二--> 19 <!--<a href="javascript:;" id="btn">按鈕</a>--> 20 </body> 21 </html> 22 <!--外聯式--> 23 <!--<script src="animate.js"></script>--> 24 <script> 25 26 /*下面是內嵌式*/ 27 // 方法一 28 function fn() { 29 // window要通過函數scrollTo(x,y) 設置意思是：滾動到文檔中的某個坐標。 30 window.scrollTo(0,0); 31 } 32 // 方法二，普通js返回頂部 33 // var btn = document.getElementById("btn"); 34 // btn.onclick = fn; 35 36 </script>
五.外聯式返回頂部。
waiLianTest.js
1 /*外聯式返回頂部測試*/ 2 function fn() { 3 // window要通過函數scrollTo(x,y) 設置意思是：滾動到文檔中的某個坐標。 4 window.scrollTo(0,0); 5 }
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .box{ 8 height: 2000px; 9 width: 100px; 10 background: deeppink; 11 } 12 </style> 13 </head> 14 <body> 15 <div class="box">我是可惡的頂部</div> 16 <a onclick="fn()" href="javascript:;" id="btn">按鈕</a> 17 18 </body> 19 </html> 20 <!--外聯式--> 21 <script src="waiLianTest.js"></script>
JavaScript--返回頂部方法:錨鏈接、行內式js寫法、外鏈式、內嵌式