HOWTO · JavaScript
JavaScript 맨 위로 스크롤
JavaScript로 웹페이지를 맨 위로 되돌립니다. 즉시 이동, 부드러운 스크롤, 앵커 링크, 선택 사항인 jQuery 애니메이션을 비교합니다.
이 페이지의 내용
window.scrollTo(0, 0)을 사용하면 현재 페이지를 맨 위로 이동할 수 있습니다. 버튼에 연결하려면 클릭 리스너를 추가하고, 브라우저가 스크롤을 애니메이션으로 처리하게 하려면 { top: 0, behavior: "smooth" }를 전달하세요.
window.scrollTo()를 사용해 페이지 맨 위로 이동
이 예제는 버튼을 직접 만든 다음 window.scrollTo()에 연결합니다. 문서 본문을 사용할 수 있게 된 뒤 페이지에서 스크립트를 실행하거나, defer를 사용해 버튼을 문서에 추가할 수 있도록 스크립트를 불러오세요. 작은 대체 객체는 Node 테스트 픽스처에서 예제를 실행할 수 있게 합니다. 브라우저에서는 페이지의 실제 document와 window를 사용합니다.
const inBrowser = typeof document !== "undefined" && typeof window !== "undefined";
const pageDocument = inBrowser ? document : {
body: {
append(button) {
button.click = () => button.listeners.click();
}
},
createElement() {
return {
listeners: {},
addEventListener(name, handler) {
this.listeners[name] = handler;
}
};
}
};
const pageWindow = inBrowser ? window : {
scrollTo(x, y) {
console.log(`scrollTo(${x}, ${y})`);
}
};
const button = pageDocument.createElement("button");
button.type = "button";
button.textContent = "Back to top";
pageDocument.body.append(button);
button.addEventListener("click", () => {
pageWindow.scrollTo(0, 0);
});
if (!inBrowser) button.click();
scrollTo(0, 0)
두 인수는 각각 가로와 세로 스크롤 위치를 나타냅니다. 두 값을 모두 0으로 설정하면 페이지의 왼쪽 위로 이동합니다. 애니메이션이 오히려 방해가 될 수 있는 짧은 동작 뒤처럼, 즉시 이동해야 할 때 이 방식을 사용하세요.
window.scrollTo()로 부드럽게 스크롤하기
부드럽게 이동하려면 window.scrollTo()에 옵션 객체를 전달하세요. 이 독립 실행형 예제도 같은 작은 Node 대체 객체를 사용하므로 브라우저 밖에서도 클릭 핸들러를 시연할 수 있습니다.
const inBrowser = typeof document !== "undefined" && typeof window !== "undefined";
const pageDocument = inBrowser ? document : {
body: {
append(button) {
button.click = () => button.listeners.click();
}
},
createElement() {
return {
listeners: {},
addEventListener(name, handler) {
this.listeners[name] = handler;
}
};
}
};
const pageWindow = inBrowser ? window : {
scrollTo(options) {
console.log(`scrollTo(top: ${options.top}, behavior: ${options.behavior})`);
}
};
const button = pageDocument.createElement("button");
button.type = "button";
button.textContent = "Back to top";
pageDocument.body.append(button);
button.addEventListener("click", () => {
pageWindow.scrollTo({ top: 0, behavior: "smooth" });
});
if (!inBrowser) button.click();
scrollTo(top: 0, behavior: smooth)
top 속성은 세로 이동 위치를 지정하고, behavior: "smooth"는 브라우저에 스크롤을 애니메이션으로 처리하도록 요청합니다. 기본 옵션 형식으로는 지속 시간을 지정할 수 없습니다. 특정 지속 시간이 필요하다면 라이브러리 애니메이션을 사용하거나 직접 애니메이션을 구현하세요. html { scroll-behavior: smooth; }와 같은 페이지 수준 CSS 규칙으로 일반 스크롤을 부드럽게 만들 수도 있지만, CSS만으로 버튼이나 맨 위로 돌아가는 동작이 생기지는 않습니다.
앵커 링크로 페이지 맨 위로 이동
앵커는 스크립트 없이 사용할 수 있는 유용한 방법입니다. 페이지 시작 부분에 <header id="page-top">처럼 ID를 지정한 다음 <a href="#page-top">Back to top</a>으로 연결하세요. 링크를 활성화하면 해당 프래그먼트로 이동하고 URL의 프래그먼트가 바뀌며, 브라우저 동작에 따라 대상 요소로 포커스 또는 탐색 위치가 이동합니다. 페이지에서 한 번만 존재하는 대상을 선택하세요. 고정 헤더가 대상을 가린다면 대상에 scroll-margin-top 같은 CSS를 적용해 보정할 수 있습니다. 예제 링크의 표시 문구인 Back to top은 원문 예시를 보존하기 위해 영어로 유지했습니다.
jQuery로 페이지 맨 위로 스크롤하기
페이지에서 이미 jQuery를 불러온다면 animate() 메서드로 문서의 스크롤 요소에 있는 scrollTop 속성을 애니메이션 처리할 수 있습니다. 이 예제는 버튼을 추가하고 애니메이션을 연결합니다. 브라우저에서는 이 스크립트보다 먼저 jQuery를 불러오세요. jQuery가 없으면 예제에서 명확한 오류가 발생합니다. 작은 대체 객체는 Node 테스트 픽스처에서만 사용됩니다.
const inBrowser = typeof document !== "undefined" && typeof window !== "undefined";
if (inBrowser && typeof globalThis.jQuery !== "function") {
throw new Error("jQuery is required for this example. Load jQuery before this script.");
}
const $ = inBrowser ? globalThis.jQuery : (selector, attributes) => {
if (selector === "<button>") {
return {
...attributes,
appendTo() { return this; },
on(name, handler) { this.handler = handler; return this; }
};
}
return {
animate(properties, duration) {
console.log(`animate(scrollTop: ${properties.scrollTop}, duration: ${duration})`);
}
};
};
const button = $("<button>", {
type: "button",
text: "Back to top"
}).appendTo("body");
button.on("click", () => {
$("html, body").animate({ scrollTop: 0 }, 800);
});
if (!inBrowser) button.handler();
animate(scrollTop: 0, duration: 800)
여기서 scrollTop: 0은 이동 위치이고 800은 애니메이션 지속 시간(밀리초)입니다. jQuery는 선택적 의존성입니다. 페이지에서 이미 해당 라이브러리를 사용하지 않는다면 기본 메서드를 사용하세요. 직접 애니메이션이나 다른 움직임 효과를 추가할 때는 방문자의 동작 줄이기 설정을 존중하세요.
상황에 맞는 방법 선택
JavaScript에서 바로 이동하려면 window.scrollTo(0, 0)을 사용하세요. 부드러운 이동이 유용하고 브라우저가 제어하는 지속 시간으로 충분하다면 옵션 형식을 선택하세요. JavaScript 없이 일반적인 페이지 탐색처럼 동작해야 한다면 앵커를 사용하세요. 프로젝트에 이미 jQuery가 포함되어 있고 지속 시간 인수가 동작에 적합하다면 jQuery를 선택하세요. 단일 페이지 애플리케이션에서 애플리케이션이 스크롤 위치를 관리하지 않는 경우, 경로나 뷰가 바뀐 뒤 기본 메서드를 호출하세요. 일반 링크나 버튼은 보조 기술 사용자가 목적을 분명히 알 수 있게 하고 키보드로도 활성화할 수 있도록 하세요.
