Making a Top Button / 맨위로 가기 버튼 만들기

세로로 길게 스크롤해서 보여주는 웹페이지가 일반적인 요즘, 페이지 하단에 맨위로 가기 버튼이 없다면 불편할 것입니다.

맨위로 가기 버튼을 아주 간단히 구현해 봅시다.

아래의 이미지 처럼 페이지 하단의 우측이 탑버튼의 기본적인 위치 입니다.

[스타일시트]

#topButton {position: fixed; right: 2%; bottom: 50px; display: none; z-index: 999;}

[스크립트]

스크립트는 크게 2개를 구현해야 하는데 첫째로는 적당히 아래로 스크롤 했을때(여기서는 500) 탑버튼을 보여주는것이고 둘째는 그렇게 나타난 탑버튼을 눌렀을때 부드럽게 상단으로 이동시켜주는 것입니다.

$(window).scroll(function() {
    // top button controll
    if ($(this).scrollTop() > 500) {
        $('#topButton').fadeIn();
    } else {
        $('#topButton').fadeOut();
    }
});

$(document).ready(function() {
  // Top Button click event handler
  $("#topButtonImg").click(function() {
    $('html, body').animate({scrollTop:0}, '300');
  });
});

[마크업]

<div id="topButton" style="cursor: pointer"><img src="/images/topbutton.png" id="topButtonImg"></div>

[탑버튼 이미지]