<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>返回页面顶部效果</title>
<script type="text/javascript" src="jq.js"></script>
<link href="../meun/static/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
*{margin:0px;padding:0px;}
a{text-decoration:none;}
div{width:1000px;height:1400px;background:red;margin:10px auto;text-align: center;}
p{position: fixed;bottom:60px;right:60px;width:60px;height:60px;font-size:13px;background:pink;text-align: center;line-height:20px;border-radius:10px;display: none;}
</style>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
if ($(window).scrollTop()>150) {
$('#p').fadeIn(1000)
}else{
$('#p').fadeOut(1000)
}
})
})
</script>
</head>
<body>
<a href="#top"></a>
<div>
页面内容
</div>
<p id="p"><a href="" id="top">返回页面顶部</a><br><i class="fa fa-hand-pointer-o" aria-hidden="true"></i></p>
</body>
</html>
