[HTML × CSS × jQuery] TOP 버튼 만들기

웹페이지를 보다보면 스크롤이 길어지는 경우를 대비해서 Top 버튼, 다시 말해서 그 버튼을 누르면 페이지의 가장 상단히 있는 곳으로 스르륵 올라가는 그런 버튼이 많이 보입니다.

그래서 오늘은 바로 그 Top 버튼을 만드는 방법을 정리해봅니다.

내용이 좀 많고 복잡해 보일 수 있지만, 천천히 따라오시면 됩니다.

Top 버튼의 특성

Top 버튼은 아래와 같은 특성이 있습니다.

Top 버튼은 항상 사용자가 보고 있는 화면에 고정되어 있음
버튼을 누르면 화면이 페이지의 가장 상단으로 스크롤 됨

위 두가지 조건을 만족하는 Top 버튼을 만들기 위해서 #HTML, #CSS 와 조금 더 나은 버튼을 위해 #jQuery 도 필요합니다.

버튼 구성하기

일단 먼저 HTML을 이용해 버튼을 구성해 봅시다.

<span id="tothetop">[TOP]</span>

버튼 구성은 아주 심플하게 가능합니다. #span 태그에 id 하나 박아주시고, 사람들이 “아, 이게 Top 버튼이구나” 하고 알 수 있게 내용만 적어주면 됩니다. 내용은 그림이 되어도 좋고, #Dashicons 을 이용해도 됩니다.

버튼 스타일링

이제 CSS 를 이용해 버튼을 스타일링 해줍시다. CSS 를 이용한 버튼 모양은 원하는대로 만들되, 아래의 스타일링은 위 특성 중 1번을 만족시키기 위해 반드시 필요합니다.

#tothetop { position: fixed; bottom: 1rem; right: 1rem; cursor: pointer; }

#position 속성을 #fixed 로 설정해 항상 사용자가 보는 화면의 고정된 위치에 버튼이 있도록 하고, bottom 과 right 를 1rem 으로 두어 화면의 우측 하단에 위치하도록 합니다. 좌측 하단에 고정하고 싶다면 bottom 과 left 를 1rem 으로 두면 되겠네요. 1rem 은 화면 가장자리에서 조금 떨어져 위치 하도록 만들기 위함입니다.

일반적으로 span 태그는 마우스 커서가 클릭 할 때의 모양이 나오지 않으니, #cursor 속성을 #pointer 로 설정해 링크를 클릭 할 때의 커서 모양이 나오도롭 해줍니다.

스크롤 기능 추가

이제 버튼의 모양새는 갖춰졌으니 스크롤 기능을 추가해봅시다. 아래에서 간단하게 #HTML 만 이용하는 방법과 #jQuery 를 이용하는 방법을 모두 정리하겠습니다.

HTML 사용

HTML 을 이용해 간단하게 만들기 위해서는 HTML 구성한 버튼을 span 태그가 아닌 #a 태그로 바꿔주고 목표를 설정하는 #href 속성에 페이지 가장 상단에 있는 요소(element)의 ID 를 적어주면 됩니다. 예를 들어 페이지 가장 상단에 site-header 라는 ID 를 가진 요소가 있다면 위에서 HTML 로 만들었던 버튼을 아래와 같이 바꿔주면 됩니다.

<a href="#site-header" id="tothetop">[TOP]</a>

아주 간단하죠? a 태그 href 속성에 # 기호와 함께 페이지 내부 요소의 id 를 적어주면 페이지 내부에서 바로 해당 요소로 점프 뛸 수 있는 기능을 이용한 것입니다.

jQuery 사용

위 처럼 HTML 로 간단하게 만들면 좋지만, 저 링크를 클릭하면 바로 화면 전환이 되어 버리고, 뭔가 스크롤 되는 감성이 없거든요. 그래서 우리는 jQuery 를 이용해 다시 버튼을 제대로 한번 만들어 봅시다. 버튼은 처음에 span 으로 만들었던 버튼을 그대로 이용하면 됩니다.

(워드프레스 환경에서 개발 하였기 때문에 $ 가 아닌 jQuery 로 표기했습니다.)

jQuery( '#tothetop' ).click( function() {
    var htmloffset = jQuery( 'html' ).offset();
    jQuery( 'html, body' ).animate( { scrollTop : htmloffset.top }, 400 );
});

코드를 살펴 보자면,

id 가 tothetop 인 요소를 클릭 하면 어떤 함수가 실행되도록 하는 것입니다.

그 함수는 html, body 에 애니메이션 효과(animate) 중 스크롤 효과(scrollTop)를 400ms(밀리세컨드, 화면 효과가 실행되는 시간) 동안 주는데 그 목적지가 htmloffset 이라는 변수로 선언한 요소의 상단(top)인 것입니다.

htmloffset 은 함수의 첫부분에 선언되었 있는데, 문서의 모든 내용을 담고 있는 html 태그로 만들어진 요소를 의미합니다.

특별히 원하는 위치가 있다면 html 대신 #site-header 와 같이 특정 요소의 id 로 요소의 위치를 변수에 담을 수도 있습니다.

자, 이제 모든 준비는 끝났습니다.

위 코드들을 잘 조합하고 연결하여 본인이 만들고자 하는 Top 버튼을 구성하고 작동하도록 만들어 주기만 하면 됩니다.

끝.