css+jQuery实现页面返回顶部

用css和jQuery实现了一个页面返回顶部的功能：当页面滑动到一定距离，出现返回顶部的标志，点击后快速滑动返回页面顶部。

效果预览：

思路：

1. 在页面顶部时没有返回顶部标志，页面滑动一定距离标志出现。这里需要用到 scroll() 方法 和scrollTop() 方法。
2. 点击页面返回顶部我开始是想用<a>标签，通过定义href="#"返回顶部，可是使用<a>标签直接返回到顶部，没有滑动返回的过程，太生硬，所以我使用jQuery动画，通过scrollTop() 方法设置页面的垂直滚动条位置为0，即顶部。

HTML：

<div id="back-to-top"><img src="image/top.jpg" alt"返回顶部图片" title="返回顶部"> </div> <!--<a href="#"></a> 直接返回，无动态效果-->
<p class="p1">内容1</p>
<p class="p2">内容2</p>
<p class="p1">内容1</p>
<p class="p2">内容2</p>

css：

body{
	margin:0;
	padding:0;
}
#back-to-top{
	width:70px;
	height:70px;
	overflow:hidden;
	border-radius:50%;
	position:fixed;
	bottom:60px;
	right:60px;
	display:none;
        cursor:pointer;
}
#back-to-top img{
	width:70px;
	height:70px;
}
p{
	margin-top:20px;
	width:100%;
	height:300px;
}
.p1{
	background:#FFBB99;
}
.p2{
	background:#EE99FF;
}

jQuery：

$(document).ready(function(){
	//出现
	$(window).scroll(function(){
		var topValue = $(window).scrollTop();
		if(topValue>300){
			$("#back-to-top").css("display","block");
		}else{
			$("#back-to-top").css("display","none");
		}		
	});
    //点击返回
    $("#back-to-top").click(function(){
		$("html,body").animate({ scrollTop: 0 }, 250);
	});
});