一、效果图如下：
回到顶部按钮在右下方
二、代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>回到顶部</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<style type="text/css">
#scrollTop{
width: 40px;
height: 40px;
position: fixed;
right: 2%;
bottom: 5%;
background:url(http://img.mukewang.com/535e0dc100010e9c00400080.jpg) no-repeat left top;
}
#scrollTop:hover{
background:url(http://img.mukewang.com/535e0dc100010e9c00400080.jpg) no-repeat 0 -39px;
}
.box{
width: 1190px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<img src="http://img.mukewang.com/535e0ce800015b7511902787.jpg">
</div>
<a href="javascript:;" id="scrollTop" title="回到顶部"></a>
<script type="text/javascript">
$(function(){
$("#scrollTop").click(function(){
$("body").animate({
scrollTop:0
},1000)
})
})
</script>
</body>
</html>三、简单说明
1、<a>标签中的javascript:;的作用是取消<a>标签点击的默认行为，如果只写<a href="#"></a>也可以实现回到顶部，但效果是瞬间回到顶部，用户体验较差，所以这里用JQuery动画实现平滑滚动到顶部。
2、配合上JQuery点击事件代码后<a>标签里的href可以写成上边代码中的href="javascript:;"也可以写成href="#"，甚至可以不写href属性，都可以实现回到顶部效果(前提是有JQuery点击事件)。
3、代码中的图片地址来自慕课网，对应视频地址：http://www.imooc.com/learn/65
1342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
