탑 스크롤 애니메이션 구현하기
세로로 긴 컨텐츠를 웹에 표시하거나 모바일 기기에서 긴 스크롤 화면을 스와이프로 스크롤 하는 경우
화면 스크롤의 번거로움을 피하기 위해 화면 최상단으로 이동할 수 있는 고정 링크를 제공할 필요가 있습니다.
화면 최상단으로 스크롤해주는 다양한 자바스크립트 라이브러리가 존재하지만, 기본 자바스크립트로도 가볍게 구현 가능합니다.
가장 단순한 탑 스크롤 애니메이션 구현
윈도우 전역 메서드인 scrollTo() 로 최상단으로 화면을 이동시킵니다.
top, left 두개의 파라메터를 사용하거나, 객체를 사용해서 파라메터를 넘길 수 있습니다.
<div id="gotop">goTop</div>window.scrollTo(0, 0);window.scrollTo({ top: 0, left: 0 });
윈도우 객체의 전역 메서드로 페이지의 어떤 위치에서든 최상위로 이동시킵니다.
기능적으로는 잘 동작하지만, 페이지 최상단으로 갑자기 건너뛰기 때문에 사용자에게 혼동을 줄 수 있습니다.
부드럽게 스크롤되면서 위로 이동되도록 하면, 사용자에게 페이지 상단으로 이동한다는 안내를 하는 것과 같은 효과를 거둘 수 있습니다.
scrollTo() 메서드 파라메터로 객체를 넘길 경우 세번째 파라메터로 "behavior" 를 지정할 수 있습니다.
스크롤 행동 방법을 지정하는 것이며 "auto", "smooth" 중 한가지를 선택할 수 있습니다.
"smooth" 가 중요한데, 화면을 부드럽게 애니메이션 되면서 이동시켜줍니다.
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
이렇게 메서드를 정의하면 화면 최상단으로 부드럽게 스크롤하면서 이동합니다.
이 방법은 간단하고 쉽지만, 인터넷 익스플로러에서는 "smooth" 옵션이 지원되지 않으며, 스크롤 애니메이션 속도를 원하는데로 제어할 수 없는 단점이 있습니다.
스크롤 애니메이션 속도 제어 구현
스크롤 애니메이션을 제어하려면 스크롤 애니메이션을 구현하는 함수를 하나 만들어야 합니다.
아래 함수는 인터벌 타이머를 이용해서 페이지 최상단으로 이동할 때까지 지정된 픽셀 크기(step)만큼씩 일정 시간 간격(between)으로 이동하는 애니메이션을 구현한 것입니다.
더 빠르게 애니메이션 되도록 하려면 한번에 이동하는 픽셀 크기(step)를 늘려주면 됩니다.
function scrollToTop(){ //스크롤 속도를 빠르게 하려면 이동 간격 시간을 줄이거나, 이동 크기 픽셀을 늘리면 됩니다. var between = 16; // 이동 간격 시간 var scroll = window.setInterval(function() { var pos = window.pageYOffset; var step = 20; // 이동 크기 픽셀 if ( pos > 0 ) { window.scrollTo( 0, pos - step ); } else { window.clearInterval( scroll ); } }, between);}
만든 함수를 이벤트 리스너에 등록합니다.
document.addEventListener('DOMContentLoaded', function(){ document.getElementById('gotop').addEventListener('click',function(){ scrollToTop(); });});
인터넷 익스플로러 구버전 호환성 구현
제어할 수 있는 스크롤 기능을 만들었지만, 이 옵션은 인터넷 익스플로러 구버전에서는 지원되지 않습니다.
또한 인터넷 익스플로러 버전에 따라 이벤트 리스너를 등록하는 방법도 다르기 때문에 인터넷 익스플로러 호환성을 위해서는 아래와 같은 방식으로 구분해서 구현해야 합니다.
if (typeof document.addEventListener != "undefined") { document.addEventListener('DOMContentLoaded', function(){ document.getElementById('gotop').addEventListener('click',function(){ scrollToTop(); }); });}else{ // IE 구버전용 이벤트 리스너 추가 window.onload = new function(){ var top = document.getElementById('gotop').attachEvent('onclick',function(){ scrollToTop(); }); };}
!주의할 점
인터넷 익스플로러를 "호환성 보기에서 인트라넷 사이트 표시" 를 켠 상태에서 사용하는 경우 로컬 파일, 또는 로컬 웹 사이트의 웹페이지에서는 전역 객체가 접근이 되지 않을 수 있습니다. 따라서 많은 자바스크립트 코드가 실행되지 않게 되므로, 개발 용도로 인터넷 익스플로러 호환성 체크를 하는 경우 호환성 보기 모드를 반드시 끄고 로컬 웹사이트, 또는 로컬 파일을 테스트해야 합니다.
"호환성 보기에서 인트라넷 사이트 표시" 옵션은 "도구 > 호환성 보기 설정" 에서 확인할 수 있습니다.
