JavaScript를 이용한 TOP 버튼 만들기!

안녕하세요~!
오늘은 많은 홈페이지에서 쓰이는 TOP 기능 버튼을 자바스크립트를 활용해 만들어 보았어요!

JavsScript 코드

전체 문서의 25%이상을 내리면 버튼이 생성됩니다.

구현하기 전 구상과 알아야 할 개념들

1. TOP 버튼이 안보이다가 일정 부분 스크롤 됐을 때 나타난다.
   • 전체 문서의 길이를 알아야 한다
     - document.documentElement를 통해 전체 문서를 가지고 올 수 있고 .scrollHeight를 통해 전체 길이를 알 수 있다.
   • 문서의 현재 스크롤 위치를 알아야 한다
     - .scrollTop을 통해 요소의 상단에서 맨 위에 보이는 콘텐츠 까지의 거리를 측정한다.
   • 문서의 25% 이상이 스크롤 되면 TOP 버튼을 보이게 한다
     - 문서 전체 높이 구한 값을 4로 나누어서 이 값보다 크면 보이게 하는 css 클래스를 생성, 작으면 제거 한다.
     
2. TOP 버튼을 눌렀을 때 자연스럽게 맨 위로 올라간다.
   • TOP 버튼을 a 태그로 만들었으므로 자연스럽게 올라가기 위해서 자바스크립트로 기능을 넣어주려면 a 태그 본연의 기능을 꺼줘야 한다
     - .preventDefault() 를 사용해 a 태그 본연의 기능을 막는다.
   • 자연스럽게 올라가기 위해서 어떤 방법을 쓸까 하다가 시간을 짧게 주고 스크롤의 값을 빼줘서 0을 만들기로 했다
     - 자연스럽게 올라가기 위해서는 짧은 시간 반복해서 계속 스크롤 값을 빼줘야 하기 때문에 일정 시간 후 한번 반복하는 .setTimeout 함수 보다는 .setInterval 함수가 적합해서 .setInterval 함수를 사용 하였다.
     - window.scrollBy(x, y)를 이용해서 수직축인 y의 값을 빼면서 0으로 만들었다.
     - setInterval 함수를 종료하기 위해서는 clearInterval(종료 할 setInterval 이름)를 사용해 줘야 한다.
     

구상으로는 쉬운데 직접 하려면 헷갈릴 수 있으니 높이들 console.log()로 중간중간 찍어보면서 만드시면 좋을거 같아요~!!