스크롤 감지, 맨 위로 기 버튼 정말 간단하게 구현

웹 페이지 개발 중에, 홈이나 메인 페이지 같은 경우에는 밑으로 쭉 내리다 보면 top, 가장 위로 다시 가게 하는 버튼이 필요한 경우가 생기게 될 것이다. 그렇다면 우리는 일정 스크롤 이상으로 내려가면 버튼이 활성화가 되도록 한다.

 

 

See the Pen Untitled by Junmannn (@Junmannn) on CodePen.

해당 부분에 대해서 쉽게 설명을 해주자면

window.addEventListener('scroll', (e) => {
	// scroll 이벤트가 발생할 때 마다 이벤트가 발생함을 인식한다
    let lastKnownScrollPosition = window.scrollY;
    // window : 현재 브라우저 창에서
    // .scrollY : 스크롤의 세로 방향 위치
  	document.getElementById("myScroll").innerHTML = window.scrollY
    /*	스크롤 세로 위치를 보도록 한다. 만약에 버튼을 보이고 싶다면 이곳에 
    if(window.scrollY > 50){ showButton = true} 
    이런 식으로 한다면 50보다 스크롤 내려간다면(내릴수록 값 높아짐) 버튼을 보이게 합시다 이런 설정을 보이면 좋겠지요*/
})