jQuery实现返回顶部功能

最新推荐文章于 2022-03-07 09:57:01 发布

转载最新推荐文章于 2022-03-07 09:57:01 发布 · 619 阅读

jquary 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了两种实现网页顶部返回顶部功能的方法，包括HTML、CSS和jQuery的结合使用，以及纯CSS和JavaScript实现。详细解释了每种方法的实现步骤、关键代码以及动态效果。

整理两个实现功能，一个是右下角的返回顶部，一个是右侧的返回顶部，分别如图

第一种实现

一、JSP或HTML(主体结构)

在body中添加

[html]view plaincopy 
   
 <body id="top">  
 <p id="back-to-top"><a href="#top"><span></span></a></p>  
 </body>  

二、CSS(样式化)

[css]view plaincopy 
   
 <style>  
     p#back-to-top {  
         position: fixed;  
         bottom: 50px;  
         right: 50px;  
     }  
       
     p#back-to-top a {  
         text-align: center;  
         text-decoration: none;  
         color: #d1d1d1;  
         display: block;  
         width: 50px;  
         /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/  
         -moz-transition: color 1s;  
         -webkit-transition: color 1s;  
         -o-transition: color 1s;  
     }  
     p#back-to-top a:hover {  
         color: #979797;  
     }  
     p#back-to-top a span {  
         background: #d1d1d1 url(/img/back_to_top.png) no-repeat center center;  
         border-radius: 6px;  
         display: block;  
         height: 50px;  
         width: 50px;  
         margin-bottom: 5px;  
           /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/  
         -moz-transition: background 1s;  
         -webkit-transition: background 1s;  
         -o-transition: background 1s;  
     }  
       
     #back-to-top a:hover span {  
         background: #979797 url(/img/back_to_top.png) no-repeat center center;  
     }  
 </style>  

图片自己网上找资源

三、jQuery(动态效果)

[javascript]view plaincopy 
   
 <script>  
 $(document).ready(function() {  
     //首先将#back-to-top隐藏  
     $("#back-to-top").hide();  
   
     //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失  
     $(function() {  
         $(window).scroll(function() {  
             if ($(window).scrollTop() > 100) {  
                 $("#back-to-top").fadeIn(1500);  
             }  
             else {  
                 $("#back-to-top").fadeOut(1500);  
             }  
         });  
         //当点击跳转链接后，回到页面顶部位置  
         $("#back-to-top").click(function() {  
             $('body,html').animate({  
                 scrollTop: 0  
             },  
             500);  
             return false;  
         });  
     });  
 });  
 </script>  

第二种实现

[css]view plaincopy 
   
 <style>  
     .backToTop {  
     display: none;  
     width: 18px;  
     line-height: 1.2;  
     padding: 5px 0;  
     background-color: #000;  
     color: #fff;  
     font-size: 12px;  
     text-align: center;  
     position: fixed;  
     _position: absolute;  
     right: 10px;  
     bottom: 100px;  
     _bottom: "auto";  
     cursor: pointer;  
     opacity: .6;  
     filter: Alpha(opacity = 60);  
 }  
 </style>  

[javascript]view plaincopy 
   
 <script>  
 (function() {  
     var $backToTopTxt = "返回顶部"  
     $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")).text($backToTopTxt)  
     .attr("title", $backToTopTxt).click(function() {  
         $("html, body").animate({  
             scrollTop: 0  
         },120);  
     })  
     $backToTopFun = function() {  
         var st = $(document).scrollTop(),  
         winh = $(window).height(); (st > 0) ? $backToTopEle.show() : $backToTopEle.hide();  
         //IE6下的定位  
         if (!window.XMLHttpRequest) {  
             $backToTopEle.css("top", st + winh - 166);  
         }  
     };  
     $(window).bind("scroll", $backToTopFun);  
     $(function() {  
         $backToTopFun();  
     });  
 })();  
 </script>  