[책] 자바스크립트 코드 레시피 278 - 93일차

스크롤 설정하기

• 페이지의 원하는 부분에 스크롤을 넣고 싶을 때
• 상단으로 가기 버튼을 사용하고 싶을 때

구문

scrollTo(x, y); // 지정한 좌표의 값까지 스크롤하기

설명

지정한 위치에 스크롤 기능을 사용하기 위해서 scrollTo() 를 사용합니다. 첫 번째 인수는 수평 두 번째 인수는 수직의 값을 지정

실습

index.html

<div class="height"></div>
<button class="btn_scrolltop">상단버튼</button>

---

style.css

.height {
  height: 10000px;
}
.btn_scrolltop {
  position: fixed;
  right: 40px;
  bottom: 40px;
  border: 1px solid #000;
  border-radius: 20px;
}

---

script.js

window.onload = () => {
  const btn = document.querySelector('.btn_scrolltop');
  btn.addEventListener('click', () => {
    window.scrollTo(0, 50); // 버튼 클릭하면 상단 50px 위치로 이동합니다.
  });
}
// window.scrollTo 사용합니다.