回到顶部
2020-02-28 本文已影响0人
里昂的凍檸茶
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html, body {
scroll-behavior: smooth;
}
.web{
position: relative;
}
.yc{
display: none;
}
.toTop{
position: fixed;
bottom: 40px;
cursor: pointer;
right: 20px;
border: 1px solid #FF0000;
}
.blue{
height: 1200px;
width: 100%;
background: #0000FF;
}
.orange{
height: 1200px;
width: 100%;
background: orange;
}
.yellow{
height: 1200px;
width: 100%;
background: yellow;
}
.red{
height: 1200px;
width: 100%;
background: red;
}
.pink{
height: 1200px;
width: 100%;
background: pink;
}
.green{
height: 1200px;
width: 100%;
background: green;
}
</style>
</head>
<body>
<div class="web">
<p name="top">我是顶部呀</p>
<div class="blue"></div>
<div class="orange"></div>
<div class="red"></div>
<div class="yellow"></div>
<div class="pink"></div>
<div class="green"></div>
<!-- <a href="#top">返回顶部</a> -->
<p class="toTop yc">返回顶部</p>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(window).on("scroll",function(){
var st = $(document).scrollTop();
if(st>300){
$(".toTop").fadeIn(function(){
$(this).removeClass("yc");
})
}else{
$(".toTop").fadeOut(function(){
$(this).addClass("yc");
})
}
})
$(".toTop").on("click",function(){
$("html,body").animate({"scrollTop":0},500)
})
</script>
</body>
</html>
