页面常见返回顶部效果(TOP)
<!DOCTYPE html>
<html>
<head>
<title>页面常见返回顶部效果(TOP)</title>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;}
body{text-align: center;}
div{width: 1200px;height: 15000px;background: #eee;margin: 0 auto;}
.video-1{width: 700px;height: 400px;}
.video-2{width: 300px;height: 200px;position: fixed;bottom: 10px;right: 180px;}
#top{display: block;width: 36px;height: 36px;background: #fff;position: fixed;bottom: 20px;right: 20px;border-radius: 50%;text-align: center;line-height: 40px;box-shadow: 0px 0px 5px #ccc;}
#top i{color: gray;font-size: 24px;}
#top span{display: none;}
#top:hover{width: 110px;border-radius: 50px;}
#top:hover span{display: block;float: left;padding-left: 10px;font-size: 13px;font-weight: bold;color: lightgreen;}
#top:hover i{color: lightgreen;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 250){
$('#back').fadeIn(300);
}else{
$('#back').fadeOut(300);
}
});
$(window).scroll(function(){
if($(window).scrollTop() > 400){
$('video').removeClass('.video-1').attr('class','video-2');
}else{
$('video').removeClass('.video-2').attr('class','video-1');
}
});
});
</script>
</head>
<body>
<a href="#top" ></a>
<div>
<video controls class="video-1">
<source src="http://anonymous.qicp.vip/uploads/moyinvideo/20190515\\8529c42367e280d52b107d063e8686ec.mp4" type="video/mp4">
</video>
</div>
<a href="" id="top"><i class="fa fa-angle-up"></i><span>回到顶部</span></a>
</body>
</html>
