HOWTO · JavaScript
JavaScript Div 맨 위로 스크롤
JavaScript 스크롤 동작은 웹 페이지의 콘텐츠를 쉽게 탐색하는 데 도움이 됩니다. scrollIntoView() 및 scrollTo()는 포괄적이며 작업을 수행하는 데 최소한의 코드 줄이 필요합니다.
이 페이지의 내용
div를 화면에 표시하려면 해당 요소에서 scrollIntoView()를 호출합니다. 페이지 뷰포트를 특정 좌표로 이동하려면 window.scrollTo()를 사용합니다. 스크롤 가능한 div 안의 콘텐츠를 처음으로 되돌리려면 해당 요소의 scrollTop을 0으로 설정합니다. 어떤 스크롤 영역을 움직여야 하는지에 따라 방법을 선택하세요. 링크로 이동할 대상이 정해져 있다면 일반적인 페이지 내 앵커가 더 간단할 수 있습니다. 동작이나 다른 로직에 따라 스크롤해야 한다면 JavaScript를 사용하세요.
JavaScript에서 scrollIntoView() 메서드로 div의 맨 위로 스크롤하기
대상 요소를 선택한 다음 block: 'start' 옵션과 함께 scrollIntoView()를 호출하면 요소의 위쪽 가장자리가 스크롤 컨테이너의 시작 부분에 맞춰집니다. 대상이 보이도록 브라우저가 페이지나 중첩된 스크롤 컨테이너를 움직일 수 있습니다. 아래 예시는 브라우저 페이지 전체를 구성하는 소스이며, 런타임 코디네이터가 실행한 예시는 아닙니다.
이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Bring a section into view</title>
<style>
body { min-height: 140vh; }
#target { margin-top: 100vh; }
</style>
<button id="show-target" type="button">Show target</button>
<div id="target">Target section</div>
<script>
document.querySelector('#show-target').addEventListener('click', () => {
document.querySelector('#target').scrollIntoView({
behavior: 'smooth',
block: 'start'
});
});
</script>
</html>
버튼 핸들러는 대상을 선택하고 브라우저에 부드럽게 움직여 대상이 위쪽 가까이에 오도록 요청합니다. 대상이 스크롤 가능한 상위 요소 안에 있으면 그 컨테이너도 움직일 수 있습니다. 즉시 이동하려면 behavior: 'smooth'를 제거하세요.
JavaScript의 scrollTo() 메서드로 div를 뷰포트 맨 위에 배치하기
window.scrollTo()는 페이지 뷰포트를 문서 좌표로 이동합니다. window.scrollTo(0, 0)을 호출하면 페이지가 문서의 시작점으로 돌아갑니다. 대상을 뷰포트 맨 위에 배치하려면 getBoundingClientRect()와 페이지의 세로 오프셋을 사용해 대상의 현재 문서 내 위치를 계산하세요. 이 방법은 페이지를 스크롤하며, 스크롤 가능한 div 내부의 콘텐츠 위치를 바꾸지는 않습니다.
이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Align a section with the viewport</title>
<style>
body { min-height: 180vh; }
#target { margin-top: 120vh; }
</style>
<button id="show-target" type="button">Show target</button>
<div id="target">Target section</div>
<script>
document.querySelector('#show-target').addEventListener('click', () => {
const target = document.querySelector('#target');
const documentTop = target.getBoundingClientRect().top + window.scrollY;
window.scrollTo({ top: documentTop, behavior: 'smooth' });
});
</script>
</html>
좌표는 버튼을 클릭할 때 계산되므로 문서에서 대상이 현재 위치한 곳을 반영합니다. 대상이 보이기만 하면 된다면 보통 scrollIntoView()가 더 직접적인 방법입니다.
JavaScript에서 scrollTop 속성으로 div의 맨 위로 스크롤하기
div 자체에 세로로 넘치는 콘텐츠가 있을 때 scrollTop을 사용하세요. 값을 0으로 설정하면 해당 콘텐츠가 처음으로 돌아가며, 페이지 뷰포트는 이동하지 않습니다. 다음은 이 값을 할당하는 자바스크립트 예시입니다. 작은 객체를 사용해 속성값이 바뀌는 모습을 보여주며, 이어지는 브라우저 페이지 예시에서는 실제 요소에 적용합니다.
다음 예시를 실행하세요:
이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.
const pane = { scrollTop: 48 };
pane.scrollTop = 0;
console.log(pane.scrollTop);
이 브라우저 페이지 소스는 div의 높이를 고정하고 그보다 많은 콘텐츠를 넣어 요소 자체의 세로 스크롤 막대가 움직이도록 합니다.
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Reset a scrollable div</title>
<style>
#pane { height: 8rem; overflow-y: auto; border: 1px solid; }
#content { height: 30rem; padding: 1rem; }
</style>
<button id="reset" type="button">Return panel to top</button>
<div id="pane"><div id="content">Scrollable panel content</div></div>
<script>
document.querySelector('#reset').addEventListener('click', () => {
document.querySelector('#pane').scrollTop = 0;
});
</script>
</html>
패널 내부 콘텐츠를 스크롤하려면 패널의 scrollTop을 사용하세요. 패널에 넘치는 콘텐츠가 없다면 스크롤할 콘텐츠 범위도 없습니다.
결론
대상 요소를 화면에 표시하려면 scrollIntoView()를, 페이지 뷰포트의 문서 좌표를 설정하려면 window.scrollTo()를, 스크롤 가능한 요소 안의 콘텐츠를 이동하려면 scrollTop을 사용하세요. 각 방법은 서로 다른 스크롤 영역을 제어하므로 무엇을 맨 위로 되돌려야 하는지에 맞춰 선택하면 됩니다.
