<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>回到顶部</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
// 当我们拖动窗口滚动条时,如果滚动条顶部偏移超过400,则显示火箭,否则隐藏火箭(默认情况下火箭隐藏)
$(window).scroll(function(){
// 获取窗口相对滚动条顶部的偏移
var top = $(window).scrollTop();
if(top > 400){// 当偏移量大于400,淡入火箭
$(".rocketDv").fadeIn(500);
} else{// 淡出火箭
$(".rocketDv").fadeOut(500);
}
});
// 给火箭添加点击事件
$(function(){
$(".rocketDv").click(function(){
// 修改图片的路径为 '带喷火的火箭图'
$(".rocketDv>img").attr("src","images/gotoTop2.png");
// 一秒内让包裹火箭的div往上走,直到最顶部
$(".rocketDv").stop().animate({"top":"0px"},1000,'linear',function(){
// 火箭归原位
$(".rocketDv").hide().css({"top":"350px"});
// 火箭图片变回最开始的图片
$(".rocketDv>img").attr("src","images/gotoTop1.png");
// 窗口滚动条回到最顶部
$(window).scrollTop(0);
});
});
});
</script>
<style>
.rocketDv{
width: 50px;
height: 101px;
position: fixed;
top: 350px;
right: 20px;
display: none;
}
</style>
</head>
<body>
<!-- 设置高度:让浏览器窗口有滚动条 -->
<div style="height: 1500px;"></div>
<!-- 包裹火箭的div -->
<div class="rocketDv">
<img src="images/gotoTop1.png"/>
</div>
</body>
</html>
实现效果:
jQuery实现回到顶部实现效果: 
![用jQuery实现一个简易的聊天框[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)