一个漂亮的top按钮特效
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
#top {background:url(rocket_up.png) 0px 0px no-repeat;position:fixed;bottom:0px;right:10px;width:149px;height:260px;cursor: pointer;}
</style>
</head>
<body>
<p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p>
<div id="top" style="display:none;"></div>
</body>
<script>
$('#top').click(function () {
$('html,body').animate({ scrollTop: '0px' }, 800);
var fly = setTimeout(function () {
$('#top').animate({ top: '-500px' }, 'normal', 'linear');
var fly2 = setTimeout(function () {
$("#top").hide();
$("#top").css("top", 'auto');
$("#top").css("background-position", '0px 0px');
clearTimeout(fly2);
}, 1200);
clearTimeout(fly);
clearInterval(flyTemp);
}, 1000);
var topPosiiton = -149;
var flyTemp = setInterval(function () {
topPosiiton += -149;
if (topPosiiton < -743) {
topPosiiton = -149;
}
$("#top").css('background-position', topPosiiton + 'px 0px');
}, 50);
});
$('#top').mouseenter(function () {
$(this).css('background-position', '-149px 0px');
});
$('#top').mouseleave(function () {
$(this).css('background-position', '0px 0px');
});
$(window).scroll(function () {
if ($(window).scrollTop() > 500) {
$("#top").fadeIn(500);
} else {
//$("#top").fadeOut(1500);
}
});
</script>
</html>
素材图片：
