[javascript] 페이지 상단으로 이동 스크립트

<div id="back-top" ><a href="#krds-masthead"><i class="svg-icon ico-go-top"></i><span class="sr-only">상단으로 이동</a> </div>

/*Back to top button */
#back-top { position: fixed; bottom: 60px; right: 10px;z-index:100;}
#back-top a { width: 50px; height: 50px; line-height: 50px; display: block; border:1px solid #d1d1d1;text-align: center;}

#back-top.hide{ display:none; }
#back-top.show{ display:block; }

const doc = document.documentElement;
const docHeight = window.pageYOffset; //스크롤된 값을 이용하기 위한 변수 선언
const start = 700; //700만큼 내려갔을 때 버튼이 나타나도록 하기 위한 변수 선언

window.addEventListener('scroll', function () { //scroll이라는 이벤트가 발생했을 때
  const topBtnWap = document.querySelector("#back-top");
  const $topBtn = document.querySelector("#back-top a");

  if (start > doc.scrollTop) { // 스크롤 탑의 값이 start보다 클 경우->스크롤을 일정 범위이상 내렸을때
    topBtnWap.classList.add("hide");
    topBtnWap.classList.remove("show");
  } else { // 스크롤 탑의 값이 start보다 크지않은 경우 
    topBtnWap.classList.remove("hide");
    topBtnWap.classList.add("show");
  };

  // 버튼 클릭 시 맨 위로 이동
  $topBtn.onclick = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  }

});