그누보드5를 위한 Back To Top Button 기능 구현

 

페이지 스크롤되면 오른쪽 하단에 자동으로 위로 갈 수 있는 버튼이 나타남..

 

적용방법:

1. css

<style type="text/css">

/* BackToTop button css */

#Topscroll {

    position:fixed;

    right:10px;

    bottom:10px;

    cursor:pointer;

    width:50px;

    height:50px;

    background-color:#3498db;

    text-indent:-9999px;

    display:none;

    -webkit-border-radius:60px;

    -moz-border-radius:60px;

    border-radius:60px

}

#Topscroll span {

    position:absolute;

    top:50%;

    left:50%;

    margin-left:-8px;

    margin-top:-12px;

    height:0;

    width:0;

    border:8px solid transparent;

    border-bottom-color:#ffffff

}

#Topscroll:hover {

    background-color:#e74c3c;

    opacity:1;filter:"alpha(opacity=100)";

    -ms-filter:"alpha(opacity=100)";

}

</style>

<script>

$(document).ready(function(){ 

    $(window).scroll(function(){ 

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

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

        } else { 

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

        } 

    }); 

    $('#Topscroll').click(function(){ 

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

        return false; 

    }); 

});

</script>

 

2. body

<a href="javascript:void(0);" id="Topscroll" title="Scroll to Top" style="display: none;">Top<span></span></a> 

 

미리보기 : http://www.live24.co.kr/