다른 명언
728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Top Button</title>
<style>
#topBtn {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: #000000;
color: #ffffff;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
</style>
</head>
<body>
<!-- your HTML code here -->
<button id="topBtn">Top</button>
<script>
window.addEventListener('scroll', function() {
var topBtn = document.getElementById("topBtn");
if (window.pageYOffset > 100) {
topBtn.style.display = "block";
} else {
topBtn.style.display = "none";
}
});
topBtn.addEventListener('click', function() {
window.scrollTo(0, 0);
});
</script>
</body>
</html>위 코드에서는 #topBtn 스타일로 버튼을 스타일링하고, 스크롤 위치에 따라 버튼을 보이거나 숨깁니다. addEventListener 메소드를 사용하여 window 객체에 scroll 이벤트를 추가하고, 스크롤 위치가 100 이상일 때 topBtn 요소의 display 속성을 block으로 설정하여 버튼을 보여줍니다.
또한, addEventListener 메소드를 사용하여 click 이벤트를 버튼 요소에 추가하고, 클릭할 때마다 window.scrollTo(0, 0) 코드를 실행하여 페이지 상단으로 이동하도록 설정합니다.
728x90