[티스토리] 맨위로 가는 TOP 버튼 만들기

 

반응형 웹 스킨을 사용하면서

 

데스크톱에서 맨위로 가는 버튼을 만들어서 사용했었는데

 

새 스킨으로 바꾸고 top으로 가는 버튼이 없으니 어색하고 아쉽더라구요. ^^;;

 

그래서 http://cocosoft.kr/353 글을 보고

 

맨위로 가는 TOP 버튼을 만들었답니다.

 

버튼모양은 CCZ-CROSS 스킨에 기본적으로 있는 것으로 수정했습니다. ㅎㅎ

 

 

1. </head> 위로 아래의 소스를 넣어줍니다.

 

 

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

 

 

ccz-cross 스킨 포함 대부분의 반응형 스킨은 설정이 되어있다고 하여  

 

샐리의 경우엔 되어있겠지 싶어 윗부분은 빼고 진행해보았는데 잘 작동이 되더라구요.

 

버튼을 넣었는데 안되면 그때 </head> 위에 넣으면 되겠습니다. ^^;;;

 

 

맨위로가기 버튼 모양은 ccz-cross스킨을 사용하고 있기에

 

기본적으로 포함된 아이콘 폰트 http://ccz-cross.tistory.com/28 중에서 선택하였습니다.

 

 

2. </body>위에 아래의 소스를 넣어줍니다.

 

<!-- 맨위로 가기 이미지 버튼 시작 -->

<a href="#" class="jcm-top hidden-xs hidden-sm

"><i class="icon icon-angle-up"></i></a>

<script>

$( document ).ready( function() {

$( window ).scroll( function() {

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

$( '.jcm-top' ).fadeIn();

} else {

$( '.jcm-top' ).fadeOut();

}

} );

$( '.jcm-top' ).click( function() {

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

return false;

} );

} );

</script>

<!-- 맨위로 가기 이미지 버튼 끝 -->

</body>

 

 

3. css편집에서 아래소스를 추가해줍니다.

 

 

/* 맨위로가기 버튼 */
a.jcm-top {
    position: fixed;
    right: 15px;
    bottom: 15px;
    border-radius: 5px;
    color: #ffffff;
    text-align: center;
    width: 45px;
    height: 45px;
    font-size: 40px;
    /*background-color: rgba(50,50,50,0.5);*/
    background-color:#323232; opacity:0.5; filter:alpha(opacity=50); /*ie8 호환을 위한코드 위와 동일한 것임 호환필요없으면 한줄로 rgba적으면됨*/
    z-index: 999;
    display: none;
}a.jcm-top:hover{background-color:#000}

 

 

소스를 수정한 후 확인을 해보면 아래와 같이 데스크톱 화면에서

 

아래사진과 같이 TOP으로 가는 버튼이 생성이 되어 보여집니다.

 

 

샐리가 설명한 맨위로 가는 TOP 버튼 만드는 방법은

 

모바일에선 티스토리에서 제공하는 맨위로 가기 버튼이 있기 때문에

 

hidden-xs hidden-sm 소스를 넣었기에 작은 기기와 매우 작은기기에서는

 

맨위로 가는 TOP 버튼은 보여지지 않는답니다.

 

이상 TOP 버튼 만드는 방법이였습니다. ^^*