상단으로 스크롤 되는 jquery 스크롤 탑(scroll top) 버튼 만들기

 

위에있는 이미지를  다운받으세요.

 
<style>
.gotop {position:fixed; _position:absolute; right:3%; bottom:3%; width:38px; height:38px; background-color:#777; z-index:3; 
    /* firefox's individual border radius properties */
    -moz-border-radius:19px; 

    /* webkit's individual border radius properties */
    -webkit-border-radius:19px;

    border-radius:19px;
}
.gotop div {z-index:4; display:block; position:relative; width:38px; height:38px; background:url("<?=$g4[theme_path]?>/images/top_arrow.png") no-repeat 7px 10px;}
</style>
 
<script>
$(function(){
    /*스크롤 탑*/
 
    $("div.gotop").fadeOut("slow");
    
    $(window).scroll(function(){
        setTimeout(scroll_top, 1000);//화살표가 반응하여 생기는 시간
    });
 
    $(".gotop").hover(function(){
        $(this).css("background-color","#307ad5");
    }, function(){
        $(this).css("background-color","#999");
        scroll_top()
    })
 
 
    $("#gotop").click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);//화살표 클릭시 화면 스크롤 속도
            return false;
    });
})
 
/*스크롤 탑*/
function scroll_top(){
    if($(window).scrollTop()<=1) {
        $("#gotop").fadeOut("slow");
    }
    else {
        $("#gotop").fadeIn("slow");
    }
}
</script>
 
<div id="gotop" class="gotop"></div>