> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/javascript/js-upgrade/interaction/scroll-event.md).

# 해당 영역으로 스크롤 이동

버튼을 클릭 했을 때, 해당 영역으로 이동하는 스크립트이다.   

* 버튼과 영역의 이미지를 가져온다. 
* 순환해서 각 버튼에 이벤트를 걸어줘야하기 때문에 버튼 노드 리스트를 배열로 변환한다. 
* 버튼 배열을 순환한다. 이벤트를 걸어준다. 
* index를 전달하여 영역의 이미지의 인덱스와 같게 한다. 
* `scrollIntoView()` 메서드를 사용한다. 

```javascript
const makeArray = (arrayLikeObject) => {
  return Array.from(arrayLikeObject)
}

const buttonList = document.querySelectorAll('.scrollView__controlTab')
const sceneList = document.querySelectorAll('.scrollView__scene')
const arrButton = makeArray(buttonList)

const handelScrollButton = function (index) {
// 클로저를 사용   
  return function (e) {
    e.preventDefault()
    sceneList[index].scrollIntoView({ behavior: 'smooth' })
  }
}

arrButton.forEach((item, index) => {
  item.addEventListener('click', handelScrollButton(index))
})

```

* `scrollIntoView()` 메서드를 사용한다. 
* 버튼리스트를 순환 처리 했기 때문에 이벤트가 클릭 되었을 이벤트 핸들링 함수가 함수를 반환할 수 있도록 설정했다. 

## 참고 

* [멘토링 저장소 - 오프라인 - 이듬 주니어 - 2WEEK](https://github.com/hanna244)