返回顶部的五种实现方法

全栈程序员站长

发布于 2022-09-07 09:26:15

5.1K0

发布于 2022-09-07 09:26:15

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

【1】使用默认链接锚点

添加一个a链接，设置a链接的href属性值为”#top”即可实现

<div>我在顶部</div>
<!-- 很多内容 -->

<!-- 很多内容 -->

<!-- 很多内容 -->

<div><a href="#top">返回顶部</a></div>

【2】href指定id

给页面顶部元素设置一个id值，将返回顶部a链接的href属性指向改id属性的元素

<div id="goTop">我在顶部</div>
<!-- 很多内容 -->

<!-- 很多内容 -->

<!-- 很多内容 -->

<div><a href="#goTop">返回顶部</a></div>

【3】使用自定义链接锚点

在页面顶部定义一个锚点，然后将返回顶部a链接的href属性指向该锚点

<a name="goTop"></a>
<div>我在顶部</div>
<!-- 很多内容 -->

<!-- 很多内容 -->

<!-- 很多内容 -->

<div><a href="#goTop">返回顶部</a></div>

【4】使用简单的JavaScript脚本

设置scrollTo(x,y)中的x和y的坐标值来滚动到页面的具体位置

<div>我在顶部</div>
<!-- 很多内容 -->
<div><a href="javascript:window.scrollTo(0,0)">返回顶部</a></div>

【5】使用简单的jQuery实现

1 <div class="container">
2 <div class="header"> 我是头部</div>
3 <div class="content">我是内容，高是1000px</div>
4 <div class="footer">我是页脚</div>
5 <div id="goToTop"><a href="#">点我回到页面顶部</a></div>
6 </div>

View Code

 1 <style type="text/css">
 2    .container {
 3       width:980px;
 4       margin:0 auto;
 5       height:auto;
 6       min-height:100%;
 7       position:relative;
 8    }
 9    .content {
10       height: 2000px;
11       border: 1px solid red;
12    }
13    #goToTop {
14       position: fixed;
15       bottom: 20px;
16       right: 10%;
17    }
18   #goToTop a {
19      background: none repeat scroll 0 0 #336699;
20      border: 1px solid #CCCCCC;
21      border-radius: 3px;
22      -webkit-border-radius: 3px;
23      color: #FF9966;
24      font-size: 14px;
25      padding: 5px;
26      text-decoration: none;
27      text-shadow: 0 1px 0 #999;
28      -webkit-text-shadow: 0 1px 0 #999;            
29      }
30  </style>

View Code

1 <script type="text/javascript" src="js/jquery.min.js"></script>
2 <script type="text/javascript">
3     $(document).ready(function(){
4         $('#goToTop a').click(function(){
5             $('html,body').animate({scrollTop:0},'slow');
6         });
7     });
8 </script>

View Code

【6】火箭上升式返回顶部（jQuery实现）

上面几种方式实现起来比较简单，但是效果生硬，直接从底部切换到顶部，没有一个过渡的动画。此方法能使页面动态滚动，同时将按钮换成一个箭头标志，判断页面滚动的距离，当页面滚动到一定的距离后再显示返回顶部箭头标志。这样的效果更佳生动。

 1 <head>
 2     <meta charset="UTF-8">
 3     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 4     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 5     <title>Document</title>
 6     <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
 7     <style>
 8         .header {
 9             color: rgb(243, 152, 6);
10             width: 100%;
11             height: 200px;
12             margin: 0 auto;
13             text-align: center;
14             font-size: 20px;
15         }
16         .footer {
17             position: fixed;
18             right: 50px;
19             bottom: 50px;
20             width: 54px;
21             height: 54px;
22         }
23     </style>
24 </head>
25 <body>
26     <div class="header">我在顶部</div>
27     <!-- 很多内容 -->
28     <br><br><br><br><br><br><br><br><br><br><br><br><br>
29     <br><br><br><br><br><br><br><br><br><br><br><br><br>
30     <br><br><br><br><br><br><br><br><br><br><br><br><br>
31     <br><br><br><br><br><br><br><br><br><br><br><br><br>
32     <br><br><br><br><br><br><br><br><br><br><br><br><br>
33     <br><br><br><br><br><br><br><br><br><br><br><br><br>
34     <!-- 很多内容 -->
35     <img class="footer" id="gotoTop" src="https://i02piccdn.sogoucdn.com/4f3b2858eec9e2cf" alt="">
36  
37     <script>
38         function gotoTop(minHeight){
39  
40             // 定义点击返回顶部图标后向上滚动的动画
41             $("#gotoTop").click(
42                 function(){$('html,body').animate({scrollTop:'0px'},'slow');
43             })
44  
45             // 获取页面的最小高度，无传入值则默认为600像素
46             minHeight? minHeight = minHeight:minHeight = 600;
47  
48             // 为窗口的scroll事件绑定处理函数
49             $(window).scroll(function(){
50  
51                 // 获取窗口的滚动条的垂直滚动距离
52                 var s = $(window).scrollTop();
53  
54                 // 当窗口的滚动条的垂直距离大于页面的最小高度时，让返回顶部图标渐现，否则渐隐
55                 if( s > minHeight){
56                     $("#gotoTop").fadeIn(500);
57                 }else{
58                     $("#gotoTop").fadeOut(500);
59                 };
60             });
61         };
62         gotoTop();
63     </script>
64 </body>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/155704.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法