JavaScript--返回顶部方法:锚链接、行内式js写法、外链式、内嵌式
返回网页顶部方法
一.锚链接
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>
