버튼 클릭하여 해당영역으로 스크롤 이동하기 scrollintoview();

 

클릭 -> 스크롤 이동을 구현해보도록 하겠다.

scrollintoview()를 사용하면 간단하다.

 

 

HTML

<p>
  클릭하세요
  <button id="box1" type="button">box1</button>
  <button id="box2" type="button">box2</button>
  <button id="box3" type="button">box3</button>
  <button id="box4" type="button">box4</button>
  <button id="box5" type="button">box5</button>
  <button id="box6" type="button">box6</button>
  <button id="box7" type="button">box7</button>
</p>
<div class="box1">박스1입니다.</div>
<div class="box2">박스2입니다.</div>
<div class="box3">박스3입니다.</div>
<div class="box4">박스4입니다.</div>
<div class="box5">박스5입니다.</div>
<div class="box6">박스6입니다.</div>
<div class="box7">박스7입니다.</div>

클릭하여 이동할 수 있게 버튼을 만들어준다.

 

 

CSS

body,div{
  margin:0;
  padding:0;
}

div{
  display: flex;
  align-items: center;
  justify-content: center;
}

.box1{ background-color:red; }
.box2{ background-color:orange; }
.box3{ background-color:yellow; }
.box4{ background-color:green; }
.box5{ background-color:blue; }
.box6{ background-color:navy; }
.box7{ background-color:purple; }

 

 

JS

const btnArr = document.getElementsByTagName('button');

for(let i = 0; i < btnArr.length; i++){

  btnArr[i].addEventListener('click',function(e){
    e.preventDefault();
    document.querySelector('.box' + (i + 1)).scrollIntoView(true);
  });

}

 

버튼의 index를 이용해서 class를 검색하여 엘리먼트를 찾는다.

*index로 찾은 엘리먼트를 통해 scrollIntoView() 해주기 때문에 class나 id가 수정되면 스크립트 오류가난다.

 

예제

예제 버튼 클릭 시 티스토리 스크롤도 top되는 현상이 생겨버렸다.!! codePen가서 해보시길..

See the Pen scrollIntoView example by leeyoonseo (@okayoon) on CodePen.

 

크롬만 테스트했고, scrollintoview 메서드가 궁금하면 MDN을 살펴보자.

https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView