맨 위로 가기 버튼

만들어둔 페이지를 내리다가 보니 맨 위로 가기 기능이 없다는 것을 깨달았다.

 

위로 가기 기능 만드는 순서는 다음과 같다.

 

1. html에 구역 만들기

<a href="#" class="toTop"><img src="https://t1.daumcdn.net/cfile/tistory/2423834154F0810214"></a>

img는 css에 background-image로  빼도 좋다.

 

2. css로 꾸미기

.toTop {
    width: 40px;
    height: 40px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: none;
}

.toTop > img {
    width: 40px;
}

 

3. Jquery로 스크립트 짜기

$(document).ready(function () {
    
# 화면을 아래로 스크롤했는지 여부를 확인
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('.toTop').fadeIn();
        } else {
            $('.toTop').fadeOut();
        }
    });
    
# 버튼을 클릭하면 웹 페이지 맨 위로 돌아감 '300'은 이동 속도
    $('.toTop').click(function () {
        $('html, body').animate({scrollTop: 0}, 300);
        return false;
    });
});