window.scrollTo()

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()	○	○	○	○	○	❌	❌	❌	○	○	○	○	○	○

참고 사이트(Reference)

• MDN

---