<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>返回顶部</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="Description" content="">
<!--css,js-->
<style type="text/css">
*{margin:0;padding:0;}
p{width:300px; height:200px;background:#ccc; margin:10px auto;}
.top{width:60px;height:50px;position:fixed;right:22px;bottom:100px;display:none;}
.top span{width:60px;height:50px;background:url("img/icon_top.png")no-repeat center #000;display:block;box-shadow:2px 4px 10px #ccc;border-radius:4px;cursor:pointer;}
</style>
<script type="text/javascript" src="js/jquery.js" ></script>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<div class = "top">
<span></span>
</div>
<script type = "text/javascript">
//返回顶部的小图标的现隐
$(window).scroll(function(){
if($(window).scrollTop() >= 100){
$(".top").fadeIn(600);
}else{
$(".top").stop(true,true).fadeOut(600);
}
});
//返回顶部
$(".top").click(function(){
$("html,body").animate({
scrollTop:0
},800);
});
</script>
</body>
</html>