1. 程式人生 > >返回頂部浮動圖示程式碼

返回頂部浮動圖示程式碼

程式碼使用很簡單,只需要將HTML程式碼,和jQuery程式碼放入到網頁的尾部即可。另外你可能還需要和我一樣盜用人人網的返回頂部圖片一張。

<div style="display:none;" class="back-to" id="toolBackTop"> 
 <a title="返回頂部" onclick="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
}