点击按钮，回到页面顶部的5种写法

zoukankan html css js c++ java

点击按钮，回到页面顶部的5种写法
1.锚点方式：
1 <body style="height:2000px;"> 2 <div id="topAnchor"></div> 3 <a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到顶部</a> 4 </body>
2.scrollTop:scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度

由于scrollTop是可写的，可以利用scrollTop来实现回到顶部的功能
1 <body style="height:2000px;"> 2 <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button> 3 <script> 4 test.onclick = function(){ 5 document.body.scrollTop = document.documentElement.scrollTop = 0; 6 } 7 </script> 8 </body>

3.scrollTo:scrollTo(x,y)方法滚动当前window中显示的文档，让文档中由坐标x和y指定的点位于显示区域的左上角,设置scrollTo(0,0)可以实现回到顶部的效果

1 <body style="height:2000px;"> 2 <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button> 3 <script> 4 test.onclick = function(){ 5 scrollTo(0,0); 6 } 7 </script> 8 </body>

4.scrollBy():scrollBy(x,y)方法滚动当前window中显示的文档，x和y指定滚动的相对量,只要把当前页面的滚动长度作为参数，逆向滚动，则可以实现回到顶部的效果
1 <body style="height:2000px;"> 2 <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button> 3 <script> 4 test.onclick = function(){ 5 var top = document.body.scrollTop || document.documentElement.scrollTop 6 scrollBy(0,-top); 7 } 8 </script> 9 </body>
5.scrolltoView()Element.scrollIntoView方法滚动当前元素，进入浏览器的可见区域,该方法可以接受一个布尔值作为参数。如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。如果没有提供该参数，默认为true,使用该方法的原理与使用锚点的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部按钮，使目标元素重新回到原来位置，则达到预期效果
1 <body style="height:2000px;"> 2 <div id="target"></div> 3 <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button> 4 <script> 5 test.onclick = function(){ 6 target.scrollIntoView(); 7 } 8 </script> 9 </body>
增强

下面对回到顶部的功能进行增强

【1】显示增强

使用CSS画图，将“回到顶部”变成可视化的图形(如果兼容IE8-浏览器，则用图片代替)

使用CSS伪元素及伪类hover效果，当鼠标移动到该元素上时，显示回到顶部的文字，移出时不显示　　
1. <style>
2. .box{
3. position:fixed;
4. right:10px;
5. bottom: 10px;
6. height:30px;
7. width: 50px;
8. text-align:center;
9. padding-top:20px;
10. background-color: lightblue;
11. border-radius: 20%;
12. overflow: hidden;
13. }
14. .box:hover:before{
15. top:50%
16. }
17. .box:hover .box-in{
18. visibility: hidden;
19. }
20. .box:before{
21. position: absolute;
22. top: -50%;
23. left: 50%;
24. transform: translate(-50%,-50%);
25. content:'回到顶部';
26. width: 40px;
27. color:peru;
28. font-weight:bold;
29. }
30. .box-in{
31. visibility: visible;
32. display:inline-block;
33. height:20px;
34. width: 20px;
35. border: 3px solid black;
36. border-color: white transparent transparent white;
37. transform:rotate(45deg);
38. }
39. </style>
40. <body style="height:2000px;">
41. <div id="box" class="box">
42. <div class="box-in"></div>
43. </div>
44. </body>
【2】动画增强

为回到顶部增加动画效果，滚动条以一定的速度回滚到顶部

动画有两种：一种是CSS动画，需要有样式变化配合transition；一种是javascript动画，使用定时器来实现　　

在上面的5种实现中，scrollTop、scrollTo()和scrollBy()方法可以增加动画，且由于无样式变化，只能增加javascript动画

定时器又有setInterval、setTimeout和requestAnimationFrame这三种可以使用，下面使用性能最好的定时器requestAnimationFrame来实现

[注意]IE9-浏览器不支持该方法，可以使用setTimeout来兼容

1、增加scrollTop的动画效果

使用定时器，将scrollTop的值每次减少50，直到减少到0，则动画完毕
1. <script>
2. var timer = null;
3. box.onclick = function(){
4. cancelAnimationFrame(timer);
5. timer = requestAnimationFrame(function fn(){
6. var oTop = document.body.scrollTop || document.documentElement.scrollTop;
7. if(oTop > 0){
8. document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
9. timer = requestAnimationFrame(fn);
10. }else{
11. cancelAnimationFrame(timer);
12. }
13. });
14. }
15. </script>
2、增加scrollTo()动画效果

将scrollTo(x,y)中的y参数通过scrollTop值获取，每次减少50，直到减少到0，则动画完毕
1. <script>
2. var timer = null;
3. box.onclick = function(){
4. cancelAnimationFrame(timer);
5. timer = requestAnimationFrame(function fn(){
6. var oTop = document.body.scrollTop || document.documentElement.scrollTop;
7. if(oTop > 0){
8. scrollTo(0,oTop-50);
9. timer = requestAnimationFrame(fn);
10. }else{
11. cancelAnimationFrame(timer);
12. }
13. });
14. }
15. </script>
3、增加scrollBy()动画效果

将scrollBy(x,y)中的y参数设置为-50，直到scrollTop为0，则回滚停止
1. <script>
2. var timer = null;
3. box.onclick = function(){
4. cancelAnimationFrame(timer);
5. timer = requestAnimationFrame(function fn(){
6. var oTop = document.body.scrollTop || document.documentElement.scrollTop;
7. if(oTop > 0){
8. scrollBy(0,-50);
9. timer = requestAnimationFrame(fn);
10. }else{
11. cancelAnimationFrame(timer);
12. }
13. });
14. }
15. </script>
实现

由于scrollTop、scrollBy()和scrollTo()方法，都以scrollTop值是否减少为0作为动画停止的参照，且三个动画的原理和实现都基本相似，性能也相似。最终，以最常用的scrollTop属性实现动画增强效果

当然，如果觉得50的速度不合适，可以根据实际情况进行调整
1. <style>
2. .box{
3. position:fixed;
4. right:10px;
5. bottom: 10px;
6. height:30px;
7. width: 50px;
8. text-align:center;
9. padding-top:20px;
10. background-color: lightblue;
11. border-radius: 20%;
12. overflow: hidden;
13. }
14. .box:hover:before{
15. top:50%
16. }
17. .box:hover .box-in{
18. visibility: hidden;
19. }
20. .box:before{
21. position: absolute;
22. top: -50%;
23. left: 50%;
24. transform: translate(-50%,-50%);
25. content:'回到顶部';
26. width: 40px;
27. color:peru;
28. font-weight:bold;
29. }
30. .box-in{
31. visibility: visible;
32. display:inline-block;
33. height:20px;
34. width: 20px;
35. border: 3px solid black;
36. border-color: white transparent transparent white;
37. transform:rotate(45deg);
38. }
39. </style>
40. <body style="height:2000px;">
41. <div id="box" class="box">
42. <div class="box-in"></div>
43. </div>
44. </body>
45. <script>
46. var timer = null;
47. box.onclick = function(){
48. cancelAnimationFrame(timer);
49. timer = requestAnimationFrame(function fn(){
50. var oTop = document.body.scrollTop || document.documentElement.scrollTop;
51. if(oTop > 0){
52. document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
53. timer = requestAnimationFrame(fn);
54. }else{
55. cancelAnimationFrame(timer);
56. }
57. });
58. }
59. </script>
查看全文

相关阅读:
zookeeper集群新手安装指南
 每天进步一点点--------归并算法
 JAVA读入流的相关常用方法
 解决maven 下载 hadoop-client 客户端报错的问题
 Java中的阻塞队列
 Java多线程-工具篇-BlockingQueue
Netty是什么？
JAVA类加载和反射介绍
 博客迁移通知：本博客已迁移至 itoolsoft.org
如何在Windows 10中重置和注销Linux子系统

原文地址：https://www.cnblogs.com/yangguoe/p/9838147.html