<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
height: 2000px;
}
.back-top {
display: none;
position: fixed;
right: 30px;
top: 60%;
z-index: 800;
height: 70px;
width: 70px;
line-height: 60px;
text-align: center;
border-radius: 50%;
background-color: pink;
font-size: 60px;
cursor: pointer;
}
</style>
</head>
<body>
<script src="jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('body').append('<div class="back-top">∧</div>');
var $returnTop = $(".back-top");
$(window).bind("scroll", function(){
var scrollTopNum = $(document).scrollTop(),
winHeight = $(window).height();
(scrollTopNum > 300) ? $returnTop.show() : $returnTop.fadeOut("fast");
});
$returnTop.click(function() {
$("html, body").animate({ scrollTop: 0 }, 500);
});
})
</script>
</body>
</html>
jquery网页滑动一段距离出现返回顶部
最新推荐文章于 2020-12-01 06:09:31 发布