abstract：demo.html: <!DOCTYPE html> <html> <head> <title>仿爱奇艺返回顶部效果（TOP）</title> <link rel="stylesheet" href="static/css/demo.css"> <li
demo.html:
<!DOCTYPE html>
<html>
<head>
<title>仿爱奇艺返回顶部效果（TOP）</title>
<link rel="stylesheet" href="static/css/demo.css">
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css">
<link rel="shortcut icon" href="static/images/logo.png" type="image/x-icon">
<script src="static/js/jquery.js"></script>
</head>
<body>
<a href=""></a>
<div>网页内容</div>
<p id="back">
<a href="">
<i class="fa fa-angle-up"></i>
<span>回到顶部</span>
</a>
</p>
<script>
$(function(){
$('a').hide();
$('.top').hide();
$('a').mouseover(function(){
$('.top').show()
});
$('a').mouseout(function(){
$('.top').hide()
});
$(window).scroll(function(){
if($(window).scrollTop()>150){
$('a').fadeIn(1000)
}else{
$('a').fadeOut(1000)
}
})
})
</script>
</body>
</html>
demo.css:
*{
margin: 0px;
padding: 0px;
}
body{
text-align: center;
}
div{
width: 1200px;
height: 1500px;
background: #eee;
margin: 30px auto;
}
#back a{
text-align: center;
position: fixed;
bottom: 100px;
right: 60px;
background: #fff;
border-radius: 50%;
height: 36px;
width: 36px;
color: #999;
line-height: 36px;
box-shadow: 0 0 5px 0 rgba(2,2,2,0.2);
text-align: center;
cursor: pointer;
font-size: 20px;
text-decoration: none;
}
.top{
position: absolute;
top:0px;
right: 35px;
height: 36px;
line-height: 36px;
font-size: 14px;
width: 60px;
padding: 0px;
text-align:center;
white-space: nowrap;
background: #e0f7e2;
border-radius: 18px 0 0 18px;
}
Correcting teacher：灭绝师太Correction time：2019-03-19 09:14:53
Teacher's summary：代码提交不全面,下次注意哦,最好附上课程完成图片