[CSS+JS] 클릭하면 페이지 최상단으로 이동하는 버튼! 단, 부드~럽게!

이번에 프로젝트는 내용을 담은 카드가 한번에 50개 이하 정도가 나오기 때문에 스크롤을 아래로 내리면 좌우의 컨텐츠가 비고 다시 최상단으로 올라오기 힘들기 때문에, 첫번째로 position: sticky를 적용한 즐겨찾기 바가 함께 내려오고, 두번째로 스크롤을 최상단으로 올려버리는 버튼을 만들었다. 사실 이렇게 세로로 긴 형태의 페이지가 아니더라도 많은 블로그와 웹사이트가 이런 버튼을 사용한다. 다음 사진은 워드프레스에서 제공하는 최상단 이동 버튼인 듯 하다.

워드프레스 최상단버튼

자바스크립트보다 파이썬을 먼저 배운 사람이지만, 셀레니움 웹스크래핑을 자주 해서 자바스크립트로 페이지를 조작하는 것은 꽤나 익숙하다. 간단하게 그 방법을 소개하고, 또 플러스로 이런 스크롤 이동이 애니메이션 효과로 부드럽게 오르내리게 하는 CSS를 소개한다.

<div class="btn-up">
    <button onclick="window.scrollTo(0, 0);" class="button btn-up-position">
        <i class="fas fa-chevron-up"></i>
    </button>
</div>

이번에 만들어본 포트폴리오용 협업 프로젝트에 실은 최상단 이동 버튼인데, 따로 함수를 작성할 것도 없이, 바로 직접적으로 onclick에 스크롤을 제일 위로 올리는 메소드를 삽입했다. scrollTo는 전체 페이지를 기준으로 X,Y 좌표에 이동하는 것을 나타내고, scrollBy는 현재 뷰를 기준으로 X,Y 방향으로 얼마나 이동할지를 나타낸다. 그래서 이렇게 scrollTo(0,0)을 하면 가장 상단의 가장 왼쪽에(보통은 가로스크롤은 잘 쓰지 않으니 티가 나지 않는다.) 뷰를 옮기게 되는 것이다.

이 버튼을 만들어 클릭해보면 역시 잘 동작한다. 그런데 갑자기 눈깜짝 할 새에 상단으로(혹은 하단으로) 이동하는 것보다 약간의 뷰 효과를 심어주고 싶다면, 다음과 같은 코드를 페이지 CSS(혹은 style태그 안에) 최상단에 삽입하면 끝이다.

html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

scroll-behavior: smooth 속성을 적용해주면 끝이다. scroll-behavior는 기본적인 글로벌 값인 inherit-unset-initial-revert 값과 함께 auto/smooth 단 두가지 속성만을 가지고 있다.

잠깐 글로벌 속성값인 inherit | unset | initial | revert 에 대해 설명하자면,

• inherit: 자신의 부모를 닮으려고 해서, 한 div 태그 안의 글자색을 혹시 바꾸고자 할때, 모든 글자를 하나하나 변경할 필요없이 상속함으로써 간단히 해결할 수 있다. 예를 들면, link가 포함된 문자열은 저절로 파란 글씨+밑줄을 갖게 되는 것이 css 디폴트값이지만, a 태그에 color: inherit을 적용하고 상위 요소에 글자색을 정했다면, a 태그의 글씨도 자연스럽게 까만 글씨를 가지게 된다. (사용자가 구분할 수 있게 밑줄은 삭제하지 않는 것을 추천한다.) 또 margin, padding과 같은 굳이 부모와 똑같은 값을 가질 필요가 없는 값까지 상속받으려고 하는 양아치 속성이 있기 때문에 조심해서 사용해야 한다.
• initial: 무조건 초기 속성으로 돌려놓는다. 이 "초기"가 되는 디폴트값이 기준이 무엇이냐면 W3C에서 예엣날에 정한 CSS1 때의 속성 값이다. 그 이후에 생긴 CSS 속성들은 출시될 때 정한 디폴트값을 가진다. 길게 설명할 만한 구석이 없는 속성이지만, 혹시 궁금하다면 여기 링크를 따라가서 초기값에 대해 알아보는 것도 괜찮을듯.
• revert는 "상속되는 속성의 경우" 상속받고, 그렇지 않은 속성들(margin, padding 등)은 '브라우저의' 초기값으로 돌려놓는다.
• unset은 "상속되는 속성의 경우" 상속받고, 그렇지 않은 속성들(margin, padding 등)은 'initial과 같은 값'으로 돌려놓는다.

이 네가지를 뺀 auto/smooth 속성값이 이 속성을 위한 값이라 생각하면 편하다. auto는 설정하지 않는다고 보면 되는데 브라우저마다 약간의 차이는 있다고 한다. smooth는 내가 원하던 대로 부드럽게 스크롤을 이동하는 값이다.

사실 가장 위의 html 코드만 있어도 기능은 잘 동작하는데, 두번째로 준 옵션은, 혹시 컴퓨터 성능이나 개인의 취향 차이로 브라우저에 이러한 애니메이션 효과를 최소로 설정해놓은 사용자에게는 그에 맞는 스크롤 동작을 제공해줘야 하기 때문에 있는 코드이다. html에서 사용한 i 태그는 fontawesome의 아이콘(∧)을 사용한 것이다. 그럼 이만