返回顶部浮动图标代码

代码使用很简单,只需要将HTML代码,和jQuery代码放入到网页的尾部即可。另外你可能还需要和我一样盗用人人网的返回顶部图片一张。

<div style="display:none;" class="back-to" id="toolBackTop"> 
 <a title="返回顶部" οnclick="window.scrollTo(0,0);return false;" href="#top" class="back-top"> 
 返回顶部</a> 
 </div> 

<script src="js/jquery.min.js" type="text/javascript"></script> 
 <script type="text/javascript"> 
 $(document).ready(function () { 
         var bt = $('#toolBackTop'); 
         var sw = $(document.body)[0].clientWidth; 
  
         var limitsw = (sw - 840) / 2 - 80; 
         if (limitsw > 0){ 
                 limitsw = parseInt(limitsw); 
                 bt.css("right",limitsw); 
         } 
  
         $(window).scroll(function() { 
                 var st = $(window).scrollTop(); 
                 if(st > 30){ 
                         bt.show(); 
                 }else{ 
                         bt.hide(); 
                 } 
         }); 
 }) 
 </script> 

A {
COLOR: #3354aa; TEXT-DECORATION: none;BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OUTLINE-style: none; OUTLINE-COLOR: invert; PADDING-LEFT: 0px; OUTLINE-WIDTH: 0px; PADDING-RIGHT: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; FONT-SIZE: 100%; VERTICAL-ALIGN: baseline; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px
}
A:hover {
BORDER-BOTTOM: medium none; COLOR: #444
}
.back-to {
Z-INDEX: 999; POSITION: fixed; WIDTH: 110px; BOTTOM: 35px; OVERFLOW: hidden; RIGHT: 10px
}
.back-to .back-top {
TEXT-INDENT: -9999em; OUTLINE-style: none; OUTLINE-COLOR: invert; OUTLINE-WIDTH: 0px; WIDTH: 50px; DISPLAY: block; BACKGROUND: url(http://www.ccvita.com/usr/themes/ccvita/images/back-top.png) no-repeat 0px 0px; FLOAT: right; HEIGHT: 50px; MARGIN-LEFT: 10px
}
.back-to .back-top:hover {
BACKGROUND-POSITION: -50px 0px
}


  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值