点击滚动到头部
HTML
Css
1、HTML
<div class="backtotop">
<img src="./image/j.svg" alt="">
</div>
2、Css
.backtotop{
opacity: 0;
position: fixed;
right: 30px;
bottom: 260px;
position: fixed;
z-index: 99;
width: 44px;
height: 44px;
box-sizing: border-box;
overflow: hidden;
border-radius: 50%;
background-image: linear-gradient(
0deg, #ffffff 0%, #f3f5f8 100%);
border: 2px solid #fff;
box-shadow: 8px 8px 20px 0 rgb(55 99 170 / 10%);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
}
3、Jquery
$(document).ready(function(){
$('.backtotop').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
});
});$(document).scroll(function() {
var scroH = $(document).scrollTop(); //滚动高度
var viewH = $(window).height(); //可见高度
var contentH = $(document).height(); //内容高度
if(scroH>500){
$('.backtotop').css('opacity',1)
}else{
$('.backtotop').css('opacity',0)
}
});