아래로 스크롤 하면 나타나는 위로가기버튼

html소스는 페이지 하단에 삽입

<a href="#" id="top_btn">상단으로</a>

제이쿼리 스크립트는 그보다 아래에 삽입

<script>

$(function() {

    $("#top_btn").on("click", function() {

        $("html, body").animate({scrollTop:0}, '500');

        return false;

    });

});

$( window ).scroll( function() {

  if ( $( this ).scrollTop() > 200 ) {

    $( '#top_btn' ).fadeIn();

  } else {

    $( '#top_btn' ).fadeOut();

  }

} );

</script>

css 소스 삽입

#top_btn{position:fixed;bottom:10%;right:5%;display:none;width:50px;height:50px;border-radius:5px;background-color:#fff !important;text-indent:-9999px;background:url("../img/top_btn.gif") center center no-repeat; overflow:hidden;opacity:0.8;z-index: 999;}