最简单的jQuery实现页面回到顶部的功能
2019-01-02 本文已影响0人
逸笛
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>回到顶部</title>
<style type="text/css">
body {
height: 8000px;
}
h1{
color: #000;
}
img {
position: fixed;
bottom: 50px;
right: 50px;
width: 150px;
height: 195px;
display: none;
z-index: 100;
}
</style>
</head>
<body>
<!-- 返回顶部小火箭 -->
<img src="img/gotop.gif" />
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$(window).scroll(function(){//scroll 页面滚动事件
var sTop=$(window).scrollTop();//scrollTop 滚动距离
if (sTop>=500) {//条件可根据需要进行修改
/*
* 都可以实现显示的作用
* $("img").show();
$("img").css("display","block")*/
$("img").fadeIn();
} else{
/* 都可以实现隐藏的作用
*
* $("img").hide()
$("img").css("display","none")*/
$("img").fadeOut()
}
})
$("img").click(function(){
$("body,html").animate({scrollTop:0},500)
})
})
</script>
</body>
</html>
