[JS] 상단이동버튼 구현 - window.scrollTo() + 페이드인/아웃

사이트들을 보면 꼭 있는 필수 기능인 상단이동버튼 구현에 관한 포스팅도 정리차 올려보려합니다.

Window.scrollTo()

Javascript는 Window.scrollTo()라는 메소드를 제공합니다.

해당 메소드는 Window 내에서 사용자가 원하는 위치로 스크롤을 이동시킬 수 있습니다. 

// 기본 형태
window.scrollTo(x-좌표, y-좌표)

scrollTo의 인자로 behavior를 추가하면 모션 설정도 가능합니다.

참고로, smooth 모션 미추가시 이동버튼을 클릭하게되면 슝~하면서 이동하는 과정없이 화면이 깜빡이면서 바로 상단으로 이동하게 됩니다. 이 동작이 많이 부자연스럽기 때문에 smooth 모션도 꼭! 설정해주기 !

// behavior에는 auto와 smooth를 입력할 수 있다. (기본값은 auto)
window.scrollTo({
    top: 0,
    behavior: "smooth",
});

자세한 사항은 mdn 에 자세히 설명되어있습니다. 

Window.scrollTo() - Web API | MDN

 

+ 다음은 상단이동시 버튼 숨기기/보이기 기능 구현에 대한 설명 추가 

이전 프로젝트에서는 제이쿼리를 활용해서 구현했었는데, 금번 진행하는 프로젝트는 자바스크립트로 변경해서 진행해봤습니다.

// 상단이동시 숨기기/보이기
window.addEventListener("scroll", ()=>{
    let scVal = window.scrollY;
    if(scVal === 0) {
        mTopBtn.style.opacity = 0;
        mTopBtn.classList.add("active");
    } else {
        mTopBtn.style.opacity = 1;
        mTopBtn.classList.remove("active");
    }
});

위 기능을 구현하기 위해선 scroll value 값을 먼저 구해와야 합니다.

window.scrollTo({top: 0}) 으로 상단이동 구현을 완료했다면,

상단에 도달한 지점의 scrollY값은 0이 될겁니다. 제 경우 scrollY === 0 에 도달한 지점에서

상단이동버튼에 스타일 속성으로 opacity = 0 을 해줬습니다. 0 에 도달한 지점이 아니라면(즉, 맨 상단 도달 지점이 아닌 경우) opacity = 1 을 주면 버튼이 상단이동지점에 따라 숨겨졌다, 보였다 하는 효과를 줄 수 있습니다.

버튼에 트랜지션까지 적절히 주게되면 자연스럽게 흐려졌다 보였다 하겠죠?

active 클래스는 클릭 가능한 느낌을 덜고자 기존 cursor: pointer 속성이 적용된 버튼요소가 상단에 도달한 지점에 cursor: auto 로 변경해주었습니다.