返回頂部浮動圖示程式碼
阿新 • • 發佈:2018-12-31
程式碼使用很簡單,只需要將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 }