一、案例描述
页面内容很多,当滚动条滚动的实际高度>=窗口可视高度时,出现向上的按钮,一点按钮就会回到顶部。
二、案例效果演示
“我是内容”处于整屏的末尾,当页面滚动到此位置时,上滑按钮就会出现。
三、案例局部代码
css代码:
<style type="text/css">
body,html{
height: 100%;
margin: 0;
padding: 0;
}
.backTop{
width: 40px;
height: 40px;
background-color: green;
text-align: center;
color: #fff;
line-height: 40px;
font-size: 20px;
position: fixed;
right: 0;
bottom: 0;
}
.content{
border: 1px solid red;
height: 3000px;
}
</style>
html代码:
<!-- 返回顶部的按钮start -->
<div class="backTop">
^
</div>
<!-- 返回顶部的按钮end -->
<div class="content">
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容<br />
我是内容2<br />
</div>
js代码:
四、案例整体代码
<script>
$(function() {
$(".backTop").hide();//默认隐藏按钮
$(window).scroll(function() {
if ($(this).scrollTop() >= $(this).height()) { //判断条件2:如果滚动条滚动的实际高度>=窗口可视高度,则.backTop出现
$(".backTop").fadeIn(500); //淡入,设置渐变时间持续0.5秒
} else {
$(".backTop").fadeOut(500); //淡出
}
});
$(".backTop").click(function() {
$("body,html").animate({
//html是最外层标签,可以代表整个页面;body 是它二级标签,可以用它代表页面的文档部分
// "body,html"都写上,兼容多浏览器
scrollTop: 0
}, 1000); //1000是滚动到顶部所需要的时间1秒
})
});
</script>
五、总结
1.默认情况下,先将按钮隐藏,当滑动页面超出一屏,也就是所谓的滚动条滚动的实际高度>=窗口可视高度,这时让按钮出现,对按钮绑定点击事件,点击之后让整屏的滚动条高度变为0,也就是所谓的滚动条没有高度,没有高度就代表着页面在最顶端。
2.scroll():https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scroll
3.scrollTop():https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop
六、新增,滑动到指定位置出现按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./js/jQuery.min.js"></script>
<title>Document</title>
<style>
.parent {
width: 400px;
height: 400px;
background-color: red;
margin: 100px;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 10px;
top: 10px;
}
.backTop {
width: 80px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: black;
color: #fff;
position: fixed;
bottom: 50px;
right: 10px;
display: none;
}
#main {
width: 500px;
height: 1000px;
background-color: #9ebc19;
}
</style>
</head>
<body>
<div class="backTop">返回顶部</div>
<div class="parent">
<div class="son"></div>
</div>
<div id="main"></div>
<script>
$(function() {
$(window).scroll(function() {
var $mtop = $('#main').offset().top; //元素距离文档上方的高度
var $jtop = $(document).scrollTop(); //卷起来的高度
// 如果卷起来的高度大于元素在页面可见的高度,让按钮显示
if ($jtop >= $mtop) {
$('.backTop').show();
} else {
$('.backTop').hide();
}
});
//点击返回顶部按钮。(1秒之内)
$('.backTop').click(function() {
$('html,body').animate({
scrollTop: 0
}, 1000)
});
});
</script>
</body>
</html>