이런 녀석

동작 데모 - https://jsfiddle.net/zr36gcpb/

코드

HTML

<div class="scroll">
  <a class="scroll__button" href=".contents__1">Scroll</a>
  <a class="scroll__button" href=".contents__2">Scroll</a>
  <a class="scroll__button" href=".contents__3">Scroll</a>
  <a class="scroll__button" href=".contents__4">Scroll</a>
</div>

<div class="contents">
  <div class="contents__1">Contents1</div>
  <div class="contents__2">Contents2</div>
  <div class="contents__3">Contents3</div>
  <div class="contents__4">Contents4</div>
</div>

JavaScript

const smoothScroll = e => {
  const target = document.querySelector(e.target.getAttribute('href'));
  const position = target.getBoundingClientRect().top + window.scrollY;

  e.preventDefault();

  window.scrollTo({
    top: position,
    behavior: 'smooth'
  });
  //window.scrollToの引数のtopは「ドキュメントの左上を基準にした目標の要素のY座標のピクセル値」で、
  //behaviorにはsmoothを指定する事で挙動がスムーススクロールになります。
}

const buttons = document.querySelectorAll('.scroll__button');

buttons.forEach(button => {
  button.addEventListener('click', smoothScroll);
})

상기 함수smoothScroll를 임의aタグ로 이동하면 버튼href에서 지정한 요소로 아날로그 스크롤할 수 있습니다.
하는 일은 간단하다. aタグ에서 지정한 값href을 얻고, 변수position에 지정한 요소의'시청각 포트의 왼쪽 위에서 Y 좌표의 픽셀 수'와'현재 굴러가는 Y 좌표의 픽셀 수'의 값(=대상 요소의 절대 위치)을 저장한다.
이 값position을 사용하여 window.scrollTo에서 목표 위치로 스크롤합니다.
또한 취소aタグ의 기본 동작preventDefault도 지정한다.aタグ 이외에 사용하려면 href를 지정data属性으로 대체할 수 있다.
다 됐습니다.(*゜▽゜ノ☆petch petch

※ 주의사항
일부 브라우저의 매개 변수 부분이 대응하지 않기 때문에 때때로 일반 스크롤이 됩니다.
브라우저 설치 상태(MDN)