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

    以上总结若有错误，欢迎指正！
  • 相关阅读:
    MySql清空所有表数据【慎用】
    积分墙已死？积分墙冲榜失效？请看看别人怎么玩转积分墙!
    [转]小心PHP的类定义顺序与继承的问题
    ［转］PHP中替换换行符
    [转]php的public、protected、private三种访问控制模式的区别
    [转]Zend Studio中将tab转换为4个空格
    PHP预定义常量
    PHP Unit资料收集
    『Python』setup.py简介
    『计算机视觉』Mask-RCNN_项目文档翻译
  • 原文地址：https://www.cnblogs.com/jiajia123/p/6104940.html
Copyright © 2011-2022 走看看