가장 심플한 Scroll to Top 버튼 1가지

scroll to top 버튼 중에서 이 소스코드가 가장 간단한 것 같아 소개 합니다.

<!-- HTML (body 태그 끝 부분에 추가) -->
<button id="scrollToTop" title="Go to top">↑</button>

<style>
/* CSS (head 태그 내의 style 태그에 추가) */
#scrollToTop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #4B89DC;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    font-size: 18px;
}

#scrollToTop:hover {
    background-color: #3D7CC9;
}
</style>

<script>
    // Scroll to Top 기능
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            $('#scrollToTop').fadeIn();
        } else {
            $('#scrollToTop').fadeOut();
        }
    });

    $('#scrollToTop').click(function() {
        $('html, body').animate({scrollTop : 0}, 300);
        return false;
    });
});
</script>