<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/loginbak/css/font.css">
<link rel="stylesheet" href="/loginbak/css/xadmin.css">
<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
<script src="/newLayui/layui/layui.js"></script>
<link rel="stylesheet" href="/newLayui/layui/css/layui.css">
<link rel="stylesheet" href="/newLayui/formSelects-v4.css">
<style>
#gotop {
display: block;
width: 60px;
height: 60px;
position: fixed;
bottom: 50px;
right: 40px;
border-radius: 10px 10px 10px 10px;
text-decoration: none;
display: none;
background-color: #999999;
}
#gotop span {
display: block;
width: 60px;
color: #dddddd;
}
#gotop span:hover {
color: #cccccc;
}
#gotop span {
font-size: 40px;
text-align: center;
margin-top: 4px;
}
</style>
</head>
<body>
<a id="gotop" href="#">
<span>▲</span>
</a>
</body>
<script>
$(function () {
$(window).scroll(function () {
var WindowHeight = ($(window).height());
var ScrollHeight = $(document).scrollTop();
if (WindowHeight <= ScrollHeight) {
$("#gotop").fadeIn(400); //淡出
} else {
$("#gotop").stop().fadeOut(400);
}
});
$("#gotop").click(function () { //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
$("html,body").animate({ scrollTop: "0px" }, 200);
});
})
</script>
</body>
</html>
页面添加返回顶部按钮
最新推荐文章于 2023-10-23 10:32:44 发布