일정 거리 이상 내려가면 나타나는 우하단 버튼. rAF 스로틀 스크롤 리스너, 숨겨진 동안엔 탭 순서에서도 제외, reduced-motion이면 스무스 대신 즉시 이동.
아래로 스크롤하면 우하단에 버튼이 나타납니다. 누르면 맨 위로 돌아갑니다.
01맨 위로 버튼은 긴 문서·랜딩에서 사용자가 상단 내비게이션으로 돌아갈 방법을 잃지 않게 해 줍니다.
02일정 거리(기본 320px) 이상 내려갔을 때만 나타나므로, 짧은 페이지에서는 아예 보이지 않습니다.
03스크롤 리스너는 rAF로 스로틀해 프레임당 한 번만 계산합니다. scroll-progress 패턴과 같은 규약입니다.
04버튼은 항상 DOM에 있고 opacity와 pointer-events로만 숨기기 때문에 등장·퇴장이 트랜지션으로 부드럽게 이어집니다.
05숨겨져 있는 동안에는 tabIndex가 -1이고 aria-hidden이 걸려, 보이지 않는 버튼에 포커스가 잡히는 혼란이 없습니다.
06reduced-motion을 켠 사용자에게는 스무스 스크롤 대신 즉시 이동으로 전환됩니다.
여기까지 내려왔다면 우하단에 버튼이 떠 있을 겁니다 ↘