碼上歡樂
相關內容    簡體    繁體

js返回頂部效果

本文轉載自   查看原文   2016-11-26 18:59   6657    javascript

當用戶瀏覽的網頁過於長的時候，用戶在瀏覽到網頁底部想要在返回頂部需要滾動好幾次滾輪才能返回頂部，不僅麻煩，而且用戶體驗也會很差。現在的大多是頁面都會在頁面頂部或者是頁面的可見區域的某一位置固定一個按鈕，點擊它可以使頁面返回頂部，用戶再也不用滾動滾輪了。下面我總結了集中常用的返回頂部的效果：

方法一（最簡單，代碼量最少，但是效果有些生硬）、代碼如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>返回頂部</title>
 6     <style>
 7         #btn{width: 50px;height: 50px;background: gray;}
 8     </style>
 9 </head>
10 <body>
11 <div id="box">
12     <p>111111111111111111</p>
13     <p>111111111111111111</p>
14     <p>111111111111111111</p>
15     <p>111111111111111111</p>
16     <p>111111111111111111</p>
17     <p>111111111111111111</p>
18     <p>111111111111111111</p>
19     <p>111111111111111111</p>
20     <p>111111111111111111</p>
21     <p>111111111111111111</p>
22     <p>111111111111111111</p>
23     <p>111111111111111111</p>
24     <p>111111111111111111</p>
25     <p>111111111111111111</p>
26     <p>111111111111111111</p>
27     <p>111111111111111111</p>
28     <p>111111111111111111</p>
29     <p>111111111111111111</p>
30     <p>111111111111111111</p>
31     <p>111111111111111111</p>
32     <p>111111111111111111</p>
33     <p>111111111111111111</p>
34     <p>111111111111111111</p>
35     <p>111111111111111111</p>
36     <p>111111111111111111</p>
37     <p>111111111111111111</p>
38     <p>111111111111111111</p>
39     <p>111111111111111111</p>
40     <p>111111111111111111</p>
41     <p>111111111111111111</p>
42     <p>111111111111111111</p>
43     <p>111111111111111111</p>
44     <p>111111111111111111</p>
45     <p>111111111111111111</p>
46     <p>111111111111111111</p>
47     <p>111111111111111111</p>
48     <p>111111111111111111</p>
49     <p>111111111111111111</p>
50     <p>111111111111111111</p>
51     <p>111111111111111111</p>
52     <p>111111111111111111</p>
53     <p>111111111111111111</p>
54     <p>111111111111111111</p>
55     <p>111111111111111111</p>
56     <p>111111111111111111</p>
57     <p>111111111111111111</p>
58     <p>111111111111111111</p>
59     <p>111111111111111111</p>
60     <p>111111111111111111</p>
61     <p>111111111111111111</p>
62     <p>111111111111111111</p>
63     <p>111111111111111111</p>
64     <p>111111111111111111</p>
65     <p>111111111111111111</p>
66     <p>111111111111111111</p>
67     <p>111111111111111111</p>
68     <p>111111111111111111</p>
69     <p>111111111111111111</p>
70     <p>111111111111111111</p>
71     <p>111111111111111111</p>
72     <p>111111111111111111</p>
73     <p>111111111111111111</p>
74     <p>111111111111111111</p>
75     <p>111111111111111111</p>
76     <p>111111111111111111</p>
77     <p>111111111111111111</p>
78     <p>111111111111111111</p>
79     <p>111111111111111111</p>
80     <p>111111111111111111</p>
81     <p>111111111111111111</p>
82     <p>111111111111111111</p>
83     <p>111111111111111111</p>
84     <p>111111111111111111</p>
85 </div>
86 <button id="btn">返回頂部</button>
87 </body>
88 <script>
89     var btn = document.getElementById('btn');
90  btn.onclick = function(){ 91  window.scrollTo(0,0);// 在窗體中如果有滾動條，將橫向滾動條移動到相對於窗體寬度為x個像素的位置，將縱向滾動條移動到相對於窗體高度為y個像素的位置(如果沒有滾動條，頁面不會發生任何變化)
92  } 93 </script>
94 </html>

方法二：代碼如下：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>返回頂部</title>
  6     <style>
  7         #btn{width: 50px;height: 50px;background: gray;}
  8     </style>
  9 </head>
 10 <body>
 11 <div id="box">
 12     <p>111111111111111111</p>
 13     <p>111111111111111111</p>
 14     <p>111111111111111111</p>
 15     <p>111111111111111111</p>
 16     <p>111111111111111111</p>
 17     <p>111111111111111111</p>
 18     <p>111111111111111111</p>
 19     <p>111111111111111111</p>
 20     <p>111111111111111111</p>
 21     <p>111111111111111111</p>
 22     <p>111111111111111111</p>
 23     <p>111111111111111111</p>
 24     <p>111111111111111111</p>
 25     <p>111111111111111111</p>
 26     <p>111111111111111111</p>
 27     <p>111111111111111111</p>
 28     <p>111111111111111111</p>
 29     <p>111111111111111111</p>
 30     <p>111111111111111111</p>
 31     <p>111111111111111111</p>
 32     <p>111111111111111111</p>
 33     <p>111111111111111111</p>
 34     <p>111111111111111111</p>
 35     <p>111111111111111111</p>
 36     <p>111111111111111111</p>
 37     <p>111111111111111111</p>
 38     <p>111111111111111111</p>
 39     <p>111111111111111111</p>
 40     <p>111111111111111111</p>
 41     <p>111111111111111111</p>
 42     <p>111111111111111111</p>
 43     <p>111111111111111111</p>
 44     <p>111111111111111111</p>
 45     <p>111111111111111111</p>
 46     <p>111111111111111111</p>
 47     <p>111111111111111111</p>
 48     <p>111111111111111111</p>
 49     <p>111111111111111111</p>
 50     <p>111111111111111111</p>
 51     <p>111111111111111111</p>
 52     <p>111111111111111111</p>
 53     <p>111111111111111111</p>
 54     <p>111111111111111111</p>
 55     <p>111111111111111111</p>
 56     <p>111111111111111111</p>
 57     <p>111111111111111111</p>
 58     <p>111111111111111111</p>
 59     <p>111111111111111111</p>
 60     <p>111111111111111111</p>
 61     <p>111111111111111111</p>
 62     <p>111111111111111111</p>
 63     <p>111111111111111111</p>
 64     <p>111111111111111111</p>
 65     <p>111111111111111111</p>
 66     <p>111111111111111111</p>
 67     <p>111111111111111111</p>
 68     <p>111111111111111111</p>
 69     <p>111111111111111111</p>
 70     <p>111111111111111111</p>
 71     <p>111111111111111111</p>
 72     <p>111111111111111111</p>
 73     <p>111111111111111111</p>
 74     <p>111111111111111111</p>
 75     <p>111111111111111111</p>
 76     <p>111111111111111111</p>
 77     <p>111111111111111111</p>
 78     <p>111111111111111111</p>
 79     <p>111111111111111111</p>
 80     <p>111111111111111111</p>
 81     <p>111111111111111111</p>
 82     <p>111111111111111111</p>
 83     <p>111111111111111111</p>
 84     <p>111111111111111111</p>
 85 </div>
 86 <button id="btn">返回頂部</button>
 87 </body>
 88 <script>
 89     var btn = document.getElementById('btn');
 90     var scrollTop ;
 91     var timer = null;
 92     window.onscroll = function(){
 93         scrollTop = document.documentElement.scrollTop||document.body.scrollTop;//兼容性寫法，並且在滾動事件內可以實時獲得滾動條距頂部的距離
 94         //console.log(scrollTop)
 95         return scrollTop;
 96     }
 97     btn.onclick = function(){
 98         clearInterval(timer);
 99 //        var now = scrollTop;
100 //        var speed = (0-now)/10;
101 //        speed = speed>0?Math.ceil(speed):Math.floor(speed);
102         timer = setInterval(function(){
103             var now = scrollTop;
104             var speed = (0-now)/10;
105             speed = speed>0?Math.ceil(speed):Math.floor(speed);//這三步設置是定時器里面可以使速度動態變化，達到有緩沖的效果，如果房子定時器外面的話，返回頂部的速度是勻速的。
106 
107             if(scrollTop==0){
108                 clearInterval(timer);
109             }
110                 document.documentElement.scrollTop =  scrollTop + speed;
111                 document.body.scrollTop =  scrollTop + speed;
112 
113         },30)
114 
115     }
116 </script>
117 </html>

方法三（利用jQuery，代碼量少，而且帶有動畫效果）：代碼如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>返回頂部</title>
 6     <script src="jquery-1.4.min.js"></script>
 7     <style>
 8         #btn{width: 50px;height: 50px;background: gray;}
 9     </style>
10 </head>
11 <body>
12 <div id="box">
13     <p>111111111111111111</p>
14     <p>111111111111111111</p>
15     <p>111111111111111111</p>
16     <p>111111111111111111</p>
17     <p>111111111111111111</p>
18     <p>111111111111111111</p>
19     <p>111111111111111111</p>
20     <p>111111111111111111</p>
21     <p>111111111111111111</p>
22     <p>111111111111111111</p>
23     <p>111111111111111111</p>
24     <p>111111111111111111</p>
25     <p>111111111111111111</p>
26     <p>111111111111111111</p>
27     <p>111111111111111111</p>
28     <p>111111111111111111</p>
29     <p>111111111111111111</p>
30     <p>111111111111111111</p>
31     <p>111111111111111111</p>
32     <p>111111111111111111</p>
33     <p>111111111111111111</p>
34     <p>111111111111111111</p>
35     <p>111111111111111111</p>
36     <p>111111111111111111</p>
37     <p>111111111111111111</p>
38     <p>111111111111111111</p>
39     <p>111111111111111111</p>
40     <p>111111111111111111</p>
41     <p>111111111111111111</p>
42     <p>111111111111111111</p>
43     <p>111111111111111111</p>
44     <p>111111111111111111</p>
45     <p>111111111111111111</p>
46     <p>111111111111111111</p>
47     <p>111111111111111111</p>
48     <p>111111111111111111</p>
49     <p>111111111111111111</p>
50     <p>111111111111111111</p>
51     <p>111111111111111111</p>
52     <p>111111111111111111</p>
53     <p>111111111111111111</p>
54     <p>111111111111111111</p>
55     <p>111111111111111111</p>
56     <p>111111111111111111</p>
57     <p>111111111111111111</p>
58     <p>111111111111111111</p>
59     <p>111111111111111111</p>
60     <p>111111111111111111</p>
61     <p>111111111111111111</p>
62     <p>111111111111111111</p>
63     <p>111111111111111111</p>
64     <p>111111111111111111</p>
65     <p>111111111111111111</p>
66     <p>111111111111111111</p>
67     <p>111111111111111111</p>
68     <p>111111111111111111</p>
69     <p>111111111111111111</p>
70     <p>111111111111111111</p>
71     <p>111111111111111111</p>
72     <p>111111111111111111</p>
73     <p>111111111111111111</p>
74     <p>111111111111111111</p>
75     <p>111111111111111111</p>
76     <p>111111111111111111</p>
77     <p>111111111111111111</p>
78     <p>111111111111111111</p>
79     <p>111111111111111111</p>
80     <p>111111111111111111</p>
81     <p>111111111111111111</p>
82     <p>111111111111111111</p>
83     <p>111111111111111111</p>
84     <p>111111111111111111</p>
85     <p>111111111111111111</p>
86 </div>
87 <button id="btn">返回頂部</button>
88 </body>
89 <script>
90     var btn = document.getElementById('btn');
91 //    var scrollTop  = document.documentElement.scrollTop||document.body.scrollTop;//兼容性寫法，並且在滾動事件內可以實時獲得滾動條距頂部的距離 ;
92     
93     btn.onclick = function(){
94 
95        $('body,html').animate({scrollTop:0},300)
96 
97     }
98 </script>
99 </html>
View Code

以上總結若有錯誤，歡迎指正！


免責聲明！

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



猜您在找 js返回頂部，加過渡效果 用js實現簡單的點擊返回頂部效果 JavaScript 返回頂部效果 【javascript】返回頂部效果 js小效果：返回頂部 scrollTop 。 滾屏：animate JavaScript實現返回頂部效果 jquery實現返回頂部的效果 js之返回網頁頂部 js中點擊返回頂部 js實現 緩慢返回頂部
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM