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

    以上总结若有错误，欢迎指正！
  • 相关阅读:
    自动映射失效的解决办法
    D方法 自动完成
    怎样处理包含的动态模板
    后台登陆功能的实现 SESSION
    输入框 最简单的样式
    php 添加数据库的几种方法
    php 连接数据库
    array、isset、三元运算符、find()
    foreach、count、explode（对无限级分类的语法注释-显示无限级效果）
    两种常用的启动和关闭MySQL服务
  • 原文地址：https://www.cnblogs.com/jiajia123/p/6104940.html
Copyright © 2011-2022 走看看