返回顶部
image.png
<!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">
<title>Document</title>
<script src="/jquery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
color: black;
font-size: 14px;
}
.container{
width: 282px;
margin: 250px auto;
}
.container ul{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.container img{
border-radius: 10px;
margin-bottom: 5px;
}
.backTop{
display: none;
position: fixed;
bottom: 100px;
right: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="javascript:void(0);"><img src="/images/jd_1.jpg" alt=""></a></li>
<li><a href="javascript:void(0);"><img src="/images/jd_2.jpg" alt=""></a></li>
<li><a href="javascript:void(0);"><img src="/images/jd_3.jpg" alt=""></a></li>
<li><a href="javascript:void(0);"><img src="/images/jd_4.jpg" alt=""></a></li>
<li><a href="javascript:void(0);"><img src="/images/jd_5.jpg" alt=""></a></li>
<li><a href="javascript:void(0);"><img src="/images/jd_6.jpg" alt=""></a></li>
</ul>
<div class="backTop">
<img src="/images/yingmo_49-35.jpg" alt="">
</div>
</div>
<script>
$('.container li').hover(function(){
$(this).siblings().stop().fadeTo(100,0.5)
},function(){
$(this).siblings().stop().fadeTo(100,1)
}
)
var boxTop=$('.container').offset().top;//获取容器到顶部的距离
$(window).scroll(function(){
if($(window).scrollTop()>=boxTop){//scrollTop为卷进去的距离
$('.backTop').fadeIn()
}else{
$('.backTop').fadeOut()
}
})
//点击返回顶部按钮就会回到顶部
$('.backTop').click(function(){
$("body,html").stop().animate({
scrollTop:0
})
})
</script>
</body>
</html>
触底效果
<!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">
<title>Document</title>
<script src="/jquery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
color: black;
font-size: 14px;
}
.container{
width: 282px;
height: 1748px;
margin:auto;
}
.container ul{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.container img{
border-radius: 10px;
margin-bottom: 5px;
}
.backTop{
display: none;
position: fixed;
bottom: 100px;
right: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="javascript:void(0);"><img src="/images/jd_1.jpg" alt=""></a></li>
<li><a href="javascript:void(0);"><img src="/images/jd_2.jpg" alt=""></a></li>
<li><a href="javascript:void(0);"><img src="/images/jd_3.jpg" alt=""></a></li>
<li><a href="javascript:void(0);"><img src="/images/jd_4.jpg" alt=""></a></li>
<li><a href="javascript:void(0);"><img src="/images/jd_5.jpg" alt=""></a></li>
<li><a href="javascript:void(0);"><img src="/images/jd_6.jpg" alt=""></a></li>
</ul>
<div class="backTop">
<img src="/images/yingmo_49-35.jpg" alt="">
</div>
</div>
<script>
$('.container li').hover(function(){
$(this).siblings().stop().fadeTo(100,0.5)
},function(){
$(this).siblings().stop().fadeTo(100,1)
}
)
var boxTop=$('.container').offset().top;
//获取container容器高度
var con_height=$('.container').height()
$(window).scroll(function(){
if($(window).scrollTop()>=boxTop){
$('.backTop').fadeIn()
}else{
$('.backTop').fadeOut()
}
if($(window).scrollTop()+$(window).height()>=con_height){
console.log("触底了");
}
})
$('.backTop').click(function(){
$("body,html").stop().animate({
scrollTop:0
})
})
</script>
</body>
</html>
$(window).scrollTop()+$(window).height()>=con_height
滚动条卷起去的距离+窗口高度=容器高度
