在内容长页处动态增加滚动的返回头部图标
.前言：
在做网页设计过程中，如果网页内容的长度不定，且当内容过长时，需要不断下拉滚动条查看新的内容。
但是，如果我需要返回头部看原来旧的内容，又需要往上滚动，让用户感觉很不方便。因此，做一个能够根据内容长度
动态增加返回头部图标的需求应运而生。
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>
