• Q&A
  • 회원가입
  • 로그인

[Window] JS - scrollTo() 메서드 ★ - 스크롤이동 (※ 지정좌표로 이동 = scrollTo메서드 = 스크롤투 메서드)

목차

  1. scrollTo() 예제 - 지정 좌표로 이동
  2. scrollTo() 정의
  3. scrollTo() 구문
  4. scrollTo() 예제 - 스크롤탑 버튼 (= 탑버튼)

 

scrollTo() 예제 - 지정 좌표로 이동

 

<style>

body {width:750px ;}

button {position: fixed;}

</style>


<h1>홈짱닷컴 Homzzang.com</h1>

<p>홈페이지 제작관리 + 서버관리 + HTML CSS JS JQ PHP SQL BS</p>


<button onclick="scrollWin()">클릭</button><br><br>


<script>

function scrollWin() {

  window.scrollTo(200, 0);

}

</script>

 

결과보기

PS. 이동 후, scrollWin 버튼 여러 번 클릭해도 더 이상 이동 안 함.

 

scrollTo() 정의

 

지정 좌표 지점으로 스크롤 이동.

 


 

1. cf.

scrollBy() 메서드 - 지정 거리만큼 여러 번 스크롤 이동 가능.

 

2.

모든 브라우저 지원.

 

3. 예제 더 보기

https://developer.mozilla.org/ko/docs/Web/API/Window/scrollTo

 

 

scrollTo() 구문

 

window.scrollTo(xpos, ypos)

 


[매개변수]

 

xpos

필수. 스크롤해서 도착할 x좌표 숫자. (px 단위 사용)

 

ypos

필수. 스크롤해서 도착할 y좌표 숫자. (px 단위 사용)

 


[반환값]

 

없음.

 

 

scrollTo() 예제 - 스크롤탑 버튼 (= 탑버튼)

1. <body> 태그 바로 아래에 아래 코드 추가

 

<button id="btnScrollToTop"><i class="fas fa-arrow-up"></i></button>

 


2. style 파일에 아래 코드 추가

 

#btnScrollToTop {

  position: fixed;

  right: 10px;

  bottom: 10px;

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background: #e76f51;

  opacity: 0.7;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);

  color: white;

  outline: 0;

  cursor: pointer;

  border: 0;

}


#btnScrollToTop:active {

  opacity: 1;

}

 


3. </body> 태그 앞쪽에 아래 코드 추가

btnScrollToTop.addEventListener("click", function () {

  window.scrollTo({

    top: 0,

    left: 0,

    behavior: "smooth"

  });

});

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012