이 기사의 예는 참조용으로 최상위 복귀 효과를 달성하기 위한 jquery의 모든 코드를 공유합니다.
렌더링:
구현 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
height: 2000px;
}
.gotop{
display: block;
width: 32px;
height: 32px;
background-color: red;
text-align: center;
text-decoration: none;
font-size: 14px;
font-weight: bold;
color: white;
line-height: 32px;
position: fixed;
right:50px;
bottom:50px;
opacity: 0;
/*top: 500px;*/
}
</style>
</head>
<body>
<div class="wrap">
<a href="###" class="gotop">TOP</a>
</div>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 当滚动条滚动大于200时出现，未大于，消失
$(window).scroll(function(){
if($(document).scrollTop()<200){
// alert("kk");
$(".gotop").stop().animate({
opacity: 0
},1000)
}
else{
$(".gotop").show().stop().animate({
opacity: 1
},1000)
}
})
// 返回顶部
$(".gotop").on("click",function(){
$("html body").animate({
scrollTop:0
},1000)
})
})
</script>
</body>
</html>
이 기사가 JavaScript 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
