Seongwon Lim

[HTML/JS] 버튼 클릭 시 페이지 맨 위로 이동하기 본문

HTML-CSS

[HTML/JS] 버튼 클릭 시 페이지 맨 위로 이동하기

limsw 2022. 7. 18. 16:25
반응형

서론

여러 웹페이지를 보면 우측 하단에 맨 위로가기 버튼이 표시되어 있는 페이지들이 많이 존재한다.

이번 글에서는 자바스크립트를 통해 맨 위로가기 기능을 구현하는 방법을 간단하게 알아보고자 한다.

구현 방법

먼저 HTML 코드는 다음과 같은 예시로 구성했다.

<body>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <button id="rollUp">위로</button>
</body>

다음으로 CSS는 다음과 같이 구성했다.

<style>
        .container {
            width: 100%;
            height: 100vh;
            color: #ffffff;
        }
        .container:nth-child(1) {
            background-color: #000000;
        }
        .container:nth-child(2) {
            background-color: #55acee;
        }
        .container:nth-child(3) {
            background-color: #dd4b39;
        }
        #rollUp {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: none;
        }
    </style>

HTML, CSS 코드는 단지 예제를 보여주기 위해 임의로 만든 레이이아웃이며 최상단으로 이동하는 기능만을 원하는 분들은 위에 코드를 참고할 필요 없이 아래의 자바스크립트 코드부터 사용하면 된다.

 

자바스크립트를 통해서 구현하는 방법은 다음과 같다.

let rollUpBtn = document.querySelector('#rollUp');

const scroll = () => {
    if (window.scrollY !== 0) {
        setTimeout(() => {
            window.scrollTo(0, window.scrollY - 50);
            scroll();
        }, 10);
    }
}

rollUpBtn.addEventListener('click', scroll);

 

scroll 함수를 해석해보면 다음과 같이 해석할 수 있다.

 

  • 함수가 실행되면 조건문을 통해 현재 스크롤의 Y좌표 값이 0인지 아닌지 확인한다.
  • Y좌표의 값이 아니라면 setTimeout() 함수를 실행한다.
  • setTimeout() 함수는 10ms 주기로 안에 정의된 코드를 반복한다.
    • 윈도우의 스크롤 좌표를 (0, 현재 Y좌표 - 50)으로 변경 후 scroll() 함수를 반복하여 호출한다.
  • scroll() 함수가 다시 호출되었으므로 위에서 거친 단계들을 다시 처음부터 수행한다.

즉, 10ms 마다 Y좌표가 50씩 줄어들며 Y좌표가 0이 될 때까지 scroll() 함수를 반복한다는 의미이다.

반복 주기를 10ms로 설정한 것은 자연스럽게 페이지가 위로 이동하는 효과를 나타내기 위함이다.

 

예를 들어, 1000(1초)로 설정을 한 뒤 코드를 실행해보면 화면이 뚝뚝 끊기면서 위로 조금씩 이동하는 것을 확인할 수 있을 것이다.

결과 확인하기

반복 주기를 10ms로 설정했을 때의 결과이다. 화면이 자연스럽게 최상단으로 이동하는 것을 확인할 수 있다.

'HTML-CSS' 카테고리의 다른 글

[HTML/CSS] 가상 요소 :before :after 개념 및 사용 방법  (0) 2022.07.22
[HTML/CSS] box-sizing 개념 및 사용 방법  (0) 2022.07.14
[HTML/CSS] 드롭다운(Drop-down) 애니메이션 구현하기  (0) 2022.05.10
[HTML/CSS] 블러(Blur) 애니메이션 구현하기  (0) 2022.05.09
[HTML/CSS] 글자 호버링 시 밑줄 효과 구현하기  (0) 2022.05.08
'HTML-CSS' Related Articles more
Comments