1、首先准备火箭图，这里是分成6等分，灰色是默认效果，其他是升空时的动画过度效果，如图：

2、构建html，这里其实用一个div.gotop就可以实现效果的，但为了体验更好这里又包了两层分别是div.mark（鼠标经过时的高亮）和div.click（点击区域，为了不让火焰的部分响应点击），代码如下：

<div class="gotop">
	<div class="mark">
    	<div class="click"></div>
    </div>
</div>

3、写样式

<style type="text/css">
/*返回顶部div容器*/
.gotop{ 
	position:fixed; 
	right:0; 
	bottom:0; 
	display:none;  
	width:149px; 
	height:250px; 
	background:url(rocket_button_up.png) no-repeat; background-position:0 0; 
	overflow:hidden;
	_bottom: auto;/*IE6*/
	_position:absolute;/*IE6*/
	_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,0)||0)-(parseInt(this.currentStyle.marginBottom,0)||0)));
}
/*遮罩，主要实现鼠标经过高亮效果，默认隐藏*/
.mark{
	width:149px; 
	height:250px; 
	background:url(rocket_button_up.png) no-repeat; background-position:-149px 0;
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
	filter:alpha(opacity=0);
 }
 /*鼠标经过显示*/
.mark:hover{
	opacity:1;
	-webkit-opacity:1;
	-moz-opacity:1;
	filter:alpha(opacity=100);
}
/*点击区域*/
.click{ 
	width:149px; 
	height:149px; 
	cursor:pointer;
}
</style>

4、jQuery实现动画：

<script type="text/javascript">
$(function() {
	var e = $(".gotop"),action=false;
	$(".click").click(function(){
		if(action) return;
		action=true;
		$('html, body').animate({scrollTop:0},1500);
		//执行时间函数，循环动画，149是每一帧的图片宽度
		var topPosiiton = -149;
		var flyTemp = setInterval(function() {
			topPosiiton += -149;
			if(topPosiiton < -743) {
				topPosiiton = -149;
			}
			$(".gotop").css('background-position', topPosiiton + 'px 0px');
		}, 50);//帧速率
		var fly = setTimeout(function(){
			$(".gotop").animate({"bottom":"1200px"},500,'linear');
			clearTimeout(fly);
			clearInterval(flyTemp);
			var fly2 = setTimeout(function() {
				$(".gotop").hide();
				$(".gotop").css("bottom", '0');
				$(".gotop").css("background-position", '0px 0px');
				clearTimeout(fly2);
				action=false;
			},1500);//恢复队列
		}, 1000);//动画时间
	});
});
</script>

好啦，到这里就算完成啦！