JavaScript 스크롤 이벤트 질문입니다!

현재 페이지 구성이

------------------------------------------------헤드1----------------------------------------------------------------

------------------------------------------------헤드2----------------------------------------------------------------

사ㅣ사ㅣ

이ㅣ이ㅣ

드ㅣ드ㅣ                                                       바 디 

1 ㅣ  2ㅣ

------------------------------------------------푸터1----------------------------------------------------------------

------------------------------------------------푸터2----------------------------------------------------------------

이렇게 구성되어있고 바디에서 스크롤 할 경우 사이드1은 고정이고 사이드2(푸터도 함께)는 바디와 함께 움직입니다.

이 화면에서 바디 상부에 버튼을 4개 구성하고 버튼 밑에는 이미지를 넣은 상태인데 버튼 클릭시 이동할 페이지

구현이 안되어서 같은 페이지 내에서 위치 이동하는 이벤트를 구현하려고 하는데 검색으론 좀 답이 안나오네요

https://zetawiki.com/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EC%8A%A4%ED%81%AC%EB%A1%A4_%EB%A7%A8_%EC%95%84%EB%9E%98%EB%A1%9C_%EB%82%B4%EB%A6%AC%EA%B8%B0

제가 원하는게 위 링크 사이트처럼 내부에서 목차 1,2,3,4 번을 눌렀을때 스크롤 이동하는 기능을 넣고 싶은겁니다.

어떻게 짜면 좋을까요?

현재 버튼은

<a href="#" id="블라블라">

<div class="blahblah" style="blahblahblah">

1번버튼

</div>

</a>

이렇게 처리되어있습니다. 버튼용 이미지가 없어서 div 통해서 버튼처럼 꾸미고 a 태그로 페이지 이동 처리 하려고 합니다.(페이지 완성시에) 이런 버튼 4개 구성했고 넣은 이미지는

<div id="이미지id" style="blah">

<img src="이미지 경로">

</div>

이렇게 넣었습니다.