<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0; padding: 0; /*브라우저가 기본적으로 제공해주는 마진, 패딩 값 제거*/
}
body {
height: 1000vh; /*vh = Viewport Height*/
background: linear-gradient(to bottom, blue, black);
}
.pos {
padding: 10px 20px;
background: tomato;
margin-top: 4344px;
display: inline-block;
}
.btn {
padding: 15px;
background-color: #000;
color : #fff;
position: fixed;
bottom: 50px;
right: 50px;
}
</style>
</head>
<boby>
<div class="pos"></div>
<div class="btn">TOP</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
// Scroll과 관련된 인터렉션 구현 시 자주 쓰는 메서드
// 1. offset()
// $(sel).offset().top //offset()안에 있는 메서드의 top // offset : 단차, 격차를 의미
// 선택자와 문서 간 최상단과의 거리를 구함
//$(sel).offset().left;
// 선택자와 문서 간 최좌측면과의 거리를 구함
var pos = $(".pos").offset().top;
$(".pos").text(pos + "px");
// 2. scroll event
// 스크롤바가 이동할 때 마다 발생하는 이벤트
// 선택자는 window
// $(window).scrollTop();
// 스크롤바의 수직 위치 값을 구하는 메서드
// $().scrolltop(value); 스크롤위치 지정
$(window).on("scroll", function() {
console.log("scrolling!!");
var scr = $(this).scrollTop();
console.log(scr);
// 3. scrollTop animation
$(".btn").on("click", function(){
//$(window).scrollTop(0);
/*
jQuery animate 속성의 scrollTop : 스크롤 이동을 애니메이션으로 보여줌
선택자 주의
*/
$("html, body").stop().animate({ // 선택자는 $(html, body")
"scrollTop" : 0
}, 500, function() {
})
});
});
</script>
</boby>
</html>
Engineering is the closest thing to magic that exists in the world.