zoukankan      html  css  js  c++  java

  • js返回顶部效果

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

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

     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

    以上总结若有错误，欢迎指正！
  • 相关阅读:
    ASP.NET MVC 重点教程一周年版 第二回 UrlRouting
    ASP.NET MVC 重点教程一周年版 第三回 Controller与View
    DynamicData for Asp.net Mvc留言本实例 下篇 更新
    Asp.net MVC视频教程 18 单选与复选框
    使用ASP.NET MVC Futures 中的异步Action
    ASP.NET MVC RC 升级要注意的几点
    ATL、MFC、WTL CString 的今生前世
    msvcprt.lib(MSVCP90.dll) : error LNK2005:已经在libcpmtd.lib(xmutex.obj) 中定义
    关于Windows内存的一些参考文章
    Windows访问令牌相关使用方法
  • 原文地址：https://www.cnblogs.com/jiajia123/p/6104940.html
Copyright © 2011-2022 走看看