본문으로 바로가기

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

category 만들기이야기/블로그 2016.04.26 13:34

 

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

 

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

 

새 스킨으로 바꾸고 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 버튼 만드는 방법이였습니다. ^^*

 


댓글을 달아 주세요

  1. tuff 2016.07.04 15:21

    안녕하세요 그대로 했는데
    안되요 ㅜㅜ

    • BlogIcon 샐리 [MODA TV] - sally 신고">2016.07.05 09:26 신고

      안녕하세요. tuff님
      1번 2번 html편집에서 3번은 css편집에서 하셨다면
      버튼모양이 없어서 안나왔을수도 있을것 같은데요.
      혹시 CCZ-CROSS 스킨이 아닌 다른스킨을 사용하시진 않는지요?
      다른 스킨이라면 icon icon-angle-up을 변경하시면 됩니다.

  2. BlogIcon ollagaza 신고">2016.10.16 22:36 신고

    감사합니다 덕분에 잘 붙였습니당^^ 잘 쓸께요

  3. 최하나 2016.11.29 11:18

    감사합니다.

  4. Ajax 2016.12.12 18:20

    디자인을 바꾸고 싶은데 어떻해 바꾸는건가요? 제발 알려주세요 ㅠㅠ
    그냥 네모난표시만 계속 되내요

    • BlogIcon 샐리 [MODA TV] - sally 신고">2016.12.12 22:03 신고

      <!-- 맨위로 가기 이미지 버튼 시작 --> 아래쪽에
      i class="icon icon-angle-up"에서 " "에 있는 부분이 이미지랍니다.
      위에 설명했듯이 샐리는 icon icon-angle-up 이미지가 스킨에 있어서 바로 사용한 것이며
      다른이미지로 변경하고자 할때엔 원하는 이미지를 다운받아
      본인의 블로그 비밀글로 이미지를 넣어 올린 후
      그림위에 커서를 가져다대고 마우스오른쪽키를 누르면 메뉴의 맨아래에 속성이 있습니다.
      속성을 누르면 주소(URL)가 나오는데 그부분을 복사하여
      <i class="icon icon-angle-up"></i>
      대신에 <img src=" 주소 넣기 " width="50" height="50" />를 넣으시면 됩니다.
      주소넣기 부분에 복사한 주소를 넣고 사이즈가 잘 맞으면 width와 height 가 필요없으며
      사이즈조절이 필요하면 수정하시면 되겠습니다.

  5. 2017.04.20 21:55

    비밀댓글입니다