页面返回顶部效果
关超2019-04-27 13:28:17245<html>
<head>
<title>回到顶部</title>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css">
<style type="text/css">
*{ margin: 0; padding: 0}
a{ text-decoration: none;}
div{width: 1200px; height: 2900px;}
p#back{ text-align: center; position: fixed;
bottom: 100px; right: 80px; background-color: lightblue; border-radius: 25px;
width: 100px; height: 40px; display: none; line-height: 40px;}
</style>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
if($(window).scrollTop()>150){
$("#back").fadeIn(1000);
}else{
$("#back").fadeOut(1000);
}
});
})
</script>
</head>
<body style="background-color: #ccc">
<a href="#top"></a>
<div></div>
<p id="back"><a href="#" id="top">回到顶部 <i class="fa fa-chevron-up"></i></a></p>
</body>
</html>