jquery回到顶部
2017-07-17 本文已影响0人
ApP2018
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>2017.7.17</title>
<link rel="stylesheet" href="">
<script src="../jquery-3.1.1.min.js"></script>
</head>
<style>
.content{
height: 1500px;
width: 990px;
background: #ccc;
margin: 0 auto;
}
.back-top{
position: fixed;
bottom: 40px;
right: 30px;
padding: 20px;
background: #2BDDE6;
color: #fff;
border-radius: 10px;
display: none;
cursor: pointer;
font-weight: bold;
}
</style>
<body>
<div class="content"></div>
<div class="back-top">回到顶部</div>
</body>
<script>
$(document).ready(function() {
var btn = $(".back-top");
btn.bind("click",function(){
$('html,body').animate({scrollTop:0}, 800);
})
$(window).bind("scroll",function(){
if($(window).scrollTop() > 0){ //当窗口滚动跳距离顶部大于零时
console.log($(window).height());
btn.fadeIn();
}else{
btn.fadeOut();
}
})
});
</script>
</html>
