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);
	});
});