JavaScript--返回頂部方法:錨鏈接、行內式js寫法、外鏈式、內嵌式

本文轉載自查看原文 2017-10-25 19:43 2981 JavaScript

返回網頁頂部方法

一.錨鏈接

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 NanUI文檔 - 打包並使用內嵌式的HTML/CSS/JS資源無聊的筆記：之三（使用H2內嵌式數據庫） JS——行內式注冊事件 js模擬html錨鏈接 javascript 鏈式寫法回到頂部回到底部，錨鏈接緩慢滑動 JavaScript語法形式3 外鏈式 JavaScript 返回頂部效果【javascript】返回頂部效果 a超鏈接之返回頂部的兩種實現方法