js返回顶部效果

时间：2016-11-26 20:16:40 阅读：232 评论：0 收藏：0 [点我收藏+]

当用户浏览的网页过于长的时候，用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部，不仅麻烦，而且用户体验也会很差。现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮，点击它可以使页面返回顶部，用户再也不用滚动滚轮了。下面我总结了集中常用的返回顶部的效果：

方法一（最简单，代码量最少，但是效果有些生硬）、代码如下：

 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

以上总结若有错误，欢迎指正！

js返回顶部效果

标签：ges 移动缓冲 clear min 而且 open lap blog

原文地址：http://www.cnblogs.com/jiajia123/p/6104940.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行