看到51cto博客新增了返回頂部按鈕,這很實用,正好自己也在搗鼓着一個破網站,就查看源碼,加上唄!
<style> | |
.backToTop { | |
display: none; | |
WIDTH: 45px; | |
height:45px; | |
BOTTOM: 20px; | |
position: fixed; | |
_position: absolute; | |
right: 140px; | |
bottom: 10px; | |
_bottom: "auto"; | |
cursor: pointer; | |
opacity: .6; | |
filter: Alpha(opacity=60); | |
text-indent:-9999px; | |
} | |
.tops { background:url(/p_w_picpaths/tops.jpg) no-repeat center center; } | |
</style> | |
<script type="text/javascript"> | |
(function() { | |
var backToTopTxt = "返回頂部", backToTopEle = $('<div class="backToTop tops"></div>').appendTo($("body")) | |
.text(backToTopTxt).attr("title", backToTopTxt).click(function() { | |
$("html, body").animate({ scrollTop: 0 }, 520); | |
}), backToTopFun = function() { | |
var st = $(document).scrollTop(), winh = $(window).height(); | |
(st > 0)? backToTopEle.show(): backToTopEle.hide(); | |
//IE6下的定位 | |
if (!window.XMLHttpRequest) { | |
backToTopEle.css("top", st + winh - 60); | |
} | |
}; | |
$(window).bind("scroll", backToTopFun); | |
$(function() { backToTopFun(); }); | |
})(); | |
</script> |