在内容长页处动态增加滚动的返回头部图标

1.前言：

  在做网页设计过程中，如果网页内容的长度不定，且当内容过长时，需要不断下拉滚动条查看新的内容。

但是，如果我需要返回头部看原来旧的内容，又需要往上滚动，让用户感觉很不方便。因此，做一个能够根据内容长度

动态增加返回头部图标的需求应运而生。

2.具体实现：

1）css文件内容：

/******返回顶部*******/
p#back-to-top{
    position:fixed;
    display:none;
    bottom:50px;
    right:210px;
}
p#back-to-top a{
    text-align:center;
    text-decoration:none;
    color:#979797;
    display:block;
    width:50px;
    /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
    -moz-transition:color 1s;
    -webkit-transition:color 1s;
    -o-transition:color 1s;
}
p#back-to-top a:hover{
    color:#333333;
}
p#back-to-top a span{
    background:transparent url(/images/uptotop.png) no-repeat;
    border-radius:6px;
    display:block;
    height:50px;
    width:50px;
    margin-bottom:5px;
	text-align:center;
    /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
    -moz-transition:background 1s;
    -webkit-transition:background 1s;
    -o-transition:background 1s;
}
#back-to-top a:hover span{
    background:transparent url(/images/uptotop.png) no-repeat;
}

-----------------------------uptotop.png-----------------------------

---------------------------------------------------------------------------

2）页面增加的js代码段（需要jquery的支持）：

<!-- 加载页面 -->
<script language="javascript" type="text/javascript">
$(document).ready(function(){
	//当滚动条的位置处于距顶部800像素以下时，跳转链接出现，否则消失
	$(window).scroll(function(){
		if ($(window).scrollTop()>800){
			$("#back-to-top").fadeIn(1500);
		}
		else
		{
			$("#back-to-top").fadeOut(1500);
		}
	});
	//当点击跳转链接后，回到页面顶部位置
	$("#back-to-top").click(function(){
		$('body,html').animate({scrollTop:0},1000);
		return false;
	});
});
</script>