window.scrollTo()
window.scrollTo() 메서드는 선택한 요소에 스크롤 값(절대 위치)을 설정합니다.
window.scrollTo()
window.scrollTo() 메서드는 선택한 요소에 스크롤 값(절대 위치)을 설정합니다.
특징 | 설명 |
---|---|
유형(type) | window |
버전(version) | -- |
결과값(return) | None(undefined) |
사용성 | ★★★☆☆ |
문법(Syntax)
window.scrollTo(x, y) / scrollTo(x, y)
window.scrollTo(옵션)
//속성 값을 변경하는 경우
window.scrollTo(100, 0);
//속성 값을 변경하는 경우
scrollTo(100, 0);
//옵션을 넣는 경우
window.scrollTo({
top: 2000,
left: 0,
behavior: 'smooth'
});
- x : x축 좌표값을 설정합니다.
- y : y축 좌표값을 설정합니다.
- 옵션 : 위치값(top, left)를 설정할 수 있으며, smooth를 설정할 수 있습니다.
정의(Definition)
- window.scrollTo() 메서드는 선택한 요소에 스크롤 값(절대 위치)을 설정합니다.
- window.scrollTo() 메서드와 window.scroll() 메서드는 속성이 거의 동일합니다. 크로스브라우징에 차이가 있습니다. scrollTo() 메서드 사용을 권장합니다.
- window는 생략 가능합니다.
스크롤과 관련된 메서드(Scroll Related method)
- window.pageXOffset 속성은 선택한 요소의 가로 스크롤 값(브라우저 기준)을 가져옵니다.
- window.pageYOffset 속성은 선택한 요소의 세로 스크롤 값(브라우저 기준)을 가져옵니다.
- window.scrollX 속성은 선택한 요소의 가로 스크롤 값(브라우저 기준)을 가져옵니다.
- window.scrollY 속성은 선택한 요소의 세로 스크롤 값(브라우저 기준)을 가져옵니다.
- window.scroll() 메서드는 선택한 요소에 스크롤 값을 설정합니다.
- window.scrollTo() 메서드는 선택한 요소에 스크롤 값(상대 위치)을 설정합니다.
- window.scrollBy() 메서드는 선택한 요소에 스크롤 값(절대 위치)을 설정합니다.
- element.scrollLeft 속성은 선택한 요소에 가로 스크롤 값을 가져오거나 설정합니다.
- element.scrollTop 속성은 선택한 요소에 세로 스크롤 값을 가져오거나 설정합니다.
- element.scrollIntoView() 메서드는 선택한 요소를 기준으로 이동하거나 설정합니다.
위치 및 스크롤과 관련된 메서드(Position & Scroll Related method) - jQuery
- offset() 메서드는 선택한 요소의 위치 좌표 값(문서 기준)을 가져오거나 설정합니다.
- position() 메서드는 선택한 요소의 위치 좌표 값(기준점 기준)을 가져오거나 설정합니다.
- scrollLeft() 메서드는 선택한 요소의 가로 스크롤 값(브라우저 기준)을 가져오거나 설정합니다.
- scrollTop() 메서드는 선택한 요소의 세로 스크롤 값(브라우저 기준)을 가져오거나 설정합니다.
예제1(Sample)
스크롤 위치 값을 구하는 예제입니다.
px /
px
오른쪽에 버튼이 있습니다. 클릭하고 확인해보세요!
버튼을 클릭하면 window.scrollTo(0, 2000)으로 이동합니다.
버튼을 클릭하면 window.scrollBy(0, 100)으로 이동합니다.
버튼을 클릭하면 window.scrollTo(0, 2000), smooth로 이동합니다.
버튼을 클릭하면 window.scrollBy(0, 100), smooth 이동합니다.
HTML
CSS
SCRIPT
<div class="jsample">
<div class="desc">
<span class="px"></span> px /
<span class="py"></span> px
</div>
</div>
.jsample {
text-align: center;
}
.jsample .desc {
position: fixed;
right: 10px;
bottom: 240px;
border-radius: 100px;
padding: 10px 20px;
background: #000;
color: #fff;
}
.sampleBtn a {
position: fixed;
right: 10px;
z-index: 10000;
background: #fff;
}
.sampleBtn .btn1 {
bottom: 180px;
}
.sampleBtn .btn2 {
bottom: 130px;
}
.sampleBtn .btn3 {
bottom: 80px;
}
.sampleBtn .btn4 {
bottom: 30px;
}
function scroll(){
document.querySelector(".jsample .px").innerHTML = window.pageXOffset;
document.querySelector(".jsample .py").innerHTML = window.pageYOffset;
requestAnimationFrame(scroll);
}
scroll();
document.querySelector(".sampleBtn .btn1").addEventListener("click", (e) => {
e.preventDefault();
window.scrollTo(0, 2000)
});
document.querySelector(".sampleBtn .btn2").addEventListener("click", (e) => {
e.preventDefault();
window.scrollBy(0, 100)
});
document.querySelector(".sampleBtn .btn3").addEventListener("click", (e) => {
e.preventDefault();
window.scrollTo({
top: 2000,
left: 0,
behavior: 'smooth'
});
});
document.querySelector(".sampleBtn .btn4").addEventListener("click", (e) => {
e.preventDefault();
window.scrollBy({
top: 100,
left: 0,
behavior: 'smooth'
});
});
호환성(Compatibility)
6 | 7 | 8 | 9 | 10 | 11 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
scrollTo() | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ | ○ |