
今天介绍返回顶部浮动图标代码。代码使用很简单,只需要将HTML代码,和jQuery代码放入到网页的尾部即可。另外你可能还需要找一张你自己喜欢的返回顶部图片,具体演示看本站。
HTML代码
<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> |
jQuery代码
<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> |
[anyad]
本站图标下载:
[url]http://wentong.org/wp-content/themes/itheme/images/back-top.png[/url]
——-2011.11.14更新——–
另外一个图标:
人吐槽 | 人点赞 |
发表评论