Html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h3>jQuery scroll 滚动事件</h3>
<div>回到顶部</div>
</body>
</html>
Css部分
* {
margin: 0;
padding: 0;
}
body {
height: 1800px;
}
h3{
text-align: center;
}
div {
position: fixed;
right: 50px;
bottom: 50px;
display: none;
/*设置默认情况下元素为隐藏状态*/
width: 40px;
height: 40px;
color: white;
background-color: #45B823;
font-family: 微软雅黑;
font-size: 15px;
font-weight: bold;
text-align: center;
cursor: pointer;
}
Jquery部分
$(function() {
//根据滚动距离判断按钮是显示或隐藏
$(window).scroll(function() {
if ($(this).scrollTop() > 300) {
$("div").css("display", "inline-block");
} else {
$("div").css("display", "none");
}
});
//实现点击滚动回顶部
$("div").click(function() {
$("html,body").scrollTop(0);
});
})
