[jQuery] νλ²νΌ (.scrollTop)
10 Nov 2021 -
Less than 1 minute read
νλ²νΌ ꡬννκΈ°
See the Pen Top Button by Jinsol (@losuif) on CodePen.
HTML
<!DOCTYPE html>
<html lang="ko">
<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>ScrollTop</title>
</head>
<body>
<div id="wrap">
<h1>
νλ²νΌ ꡬν
</h1>
<span id="topBtn">TOP</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>
CSS
@charset("UTF-8");
html {
scroll-behavior: smooth;
}
div#wrap {
width: 600px;
height: 2000px;
padding: 20px;
margin: 0 auto;
border: 1px solid #000;
}
span#topBtn {
width: 40px;
height: 40px;
text-align: center;
font-weight: bold;
line-height: 40px;
border: 1px solid #000;
cursor: pointer;
position: fixed;
right: 10px;
bottom: 10px;
}
JavaScript
$(function(){
$("span#topBtn").click(function(){
$(window).scrollTop(0);
});
});