웹사이트 탑버튼 (Top button) 활용하기 jquery, css

웹사이트 탑버튼 (Top button) 활용하기 jquery, css

웹사이트 탑버튼 (Top button) 활용하기 jquery, css

웹사이트를 운영하다보면 스크롤이 길어질 경우 top 버튼이 필요할때가 종종있게 된다.  이때 사용할 수 있는 간단하고 유용한 Top 버튼 jquery

를 소개한다.

1. 우선 jquery 라이브러리를 정의하자

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

2. 스크립트 부분에 아래코드를 넣고

<script type='text/javascript'>
$(document).ready(function(){ 
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > 100) { 
            $('#scroll').fadeIn(); 
        } else { 
            $('#scroll').fadeOut(); 
        } 
    }); 
    $('#scroll').click(function(){ 
        $("html, body").animate({ scrollTop: 0 }, 600); 
        return false; 
    }); 
});
</script>

3. css 설정을 한다.

#scroll {
    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
}
#scroll 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;
}
#scroll:hover {
    background-color:#e74c3c;
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}

4 모든 설정이 되었다면 top 버튼이 위치할 곳에 아래 버튼을 넣도록 하자.

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

이상으로 모든 설정이 끝이다..

완성되어 출력된 화면을 보자.