[Javascript] 스크롤 이벤트 ( Window.scroll )

 

//스크롤 만들기
//document 한 단계 위에 있는 window

window.addEventListener("scroll", function () {
  // 현재 위치 확인 scrollY
  if (scrollY >= 100) {
    document.querySelector(".up-button").style.display = "block";
    // console.log("현재위치", scrollY);
  } else {
    document.querySelector(".up-button").style.display = "none";
  }
});

document.querySelector(".up-button").addEventListener("click", function () {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth",
  });
});

 

 

하단에 버튼을 position: fixed로 위치 고정

 

 

 

 

scrollY --> 문서 내에 현재위치를 확인하는 메서드

현재위치를 확인하기 위해 콘솔창에 찍어봤더니

스크롤 위치마다 숫자값으로 위치를 확인할 수 있었다

 

 

 

 

behavior --> 스크롤의 동작을 나타낸다

 - auto : 기본

 - smooth : 부드럽게

 

 

 

 

---