仿爱奇艺回到顶部效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>回到顶部</title>
<link rel="stylesheet" href="static/css/style.css" type="text/css">
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css">
<script src="static/js/jquery.js"></script>
<style>
.content {
width: 1000px;
height: 1500px;
background: #eee;
margin: 20px auto;
}
a {text-decoration: none;color: #999999;font-size: 26px;position:relative;}
#back {width: 38px;height: 38px;
border: 1px solid #ccc;
border-radius: 50%;
line-height: 40px;
text-align: center;
position: fixed;
bottom: 30px;
right: 60px;
display: none;
}
.top {
width: 110px;
height: 40px;
line-height: 40px;
background: #E0F7E2;
font-size: 13px;
text-align: center;
color: #21C627;
border-radius: 20px;
margin-right: 30px;
position: absolute;
top: -3px;
right: -41px;
float:left;
display: none;
z-index: -1;
}
a:hover {color: #21C627;}
a:hover .top{display: block;}
</style>
<script>
$(function(){
$(window).scroll(function(){
if($(window).scrollTop()>150) {
$('#back').fadeIn(1000);
}else{
$('#back').fadeOut(1000);
}
})
})
</script>
</head>
<body>
<a href=""></a>
<div class="content">网页内容</div>
<div id="back"><a href=""><span class="fa fa-angle-up"></span><div class="top">回到顶部</div></a></div>
</body>
</html>