jQuery返回顶部的按钮

最新推荐文章于 2025-09-10 16:16:57 发布

weixin_30852419

最新推荐文章于 2025-09-10 16:16:57 发布

阅读量73

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/karry990921/p/7094558.html

本文介绍了一个使用jQuery实现的返回顶部按钮案例。该按钮在页面滚动超过100像素时出现，并固定在屏幕右下角。点击按钮可以平滑滚动到页面顶部。样式通过CSS定义，包括位置、大小及背景等。

HTML结构：

body里的代码：


<div class="hulubo">
    <a href="javascript:"></a>
</div>

css结构：

.hulubo{left:1180px;
bottom:69.8px;
right:auto;
position:fixed;
z-index: 199999;}
.hulubo a{position:absolute;
height:58px;width:58px;
background:url(../images/gotop.png)no-repeat scroll;background-position:center;background-size: 58px 58px;}

直接改宽高和背景图片就可以了

jQuery代码：

 1 $(function(){  
 2     var $btn_top = $('.hulubo');  
 3 12     $("body").append($btn_top);  
13     $("body").on("click",".hulubo",function(){  
14         $("html,body").animate({scrollTop: 0},"slow");  
15     });  
16     var $btn = $(".hulubo");  
17     if($(window).scrollTop() > 100){  
18         $btn.fadeIn(600);  
19     }  
20     $(window).scroll(function(){  
21         if($(window).scrollTop() > 100){  
22             $btn.fadeIn(600);  
23         }else{  
24             $btn.fadeOut(600);  
25         }  
26     });  
27 });