본문으로 바로가기

오늘은 일정 위치 까지 스크롤이 내려가면 스스륵 생기고

부드럽게 스크롤 이동 되어 올라가는 맨위로 가기 버튼을 만들어 보겠습니다.


jQuery를 사용해서 만들텐데요.

jQuery는 다양하고 유용한 자바스크립들의 라이브러리라고 보시면 됩니다.


우선 jquery를 사용하기 위해서 실행(?) 선언(?)을 해줍니다.

다양하게 소스를 추가 하는 방식이 있는데

간편하게 외부서버 CDN을 이용해서 추가를 할 것입니다.


티스토리 블로그 대부분의 반응형 스킨을 사용하면 설정이 되어 있을 거에요.

혹시나 본인의 티스토리 블로그 스킨 HTML편집에서 jQuery가 추가 되어 있다면

이작업은 건너 뛰어도 좋습니다.


만약 없다면 소스를 추가 해줘야 합니다.

jQuery 소스 - [HTML]에 추가


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

스크립트 파일은 <head> 또는 <body> 부분에 붙혀 넣기 하면 되고 보통 외부 스크립트 파일은 <head>안에 위치하라고 하는데

스크립트 위치는 크게 상관이 없는 것 같습니다. 다만 코드를 한 곳에 모아두는 습관을 가지는 것이 좋고 페이지에 영향을 주는

외부 스타일 이나 스크립트 파일을 우선 배치시키는 것이 페이지의 내용을 정확하게 표시되고 동작한다는 이론이 있습니다.


jQuery의 버전은 1.0과 2.0이 있는데 2.0부터는 구식 익스플로러(IE6,7,8)를 지원하지 않습니다.

1.0 버전은 1.12.0 까지 출시되었지만 1.12버전은 호환이 잘 안되고 오류문제가있어 1.11.3 버전 사용을 권장합니다.


맨위로 가기 버튼 - [HTML]에 추가


<!-- 이미지로 버튼만들려면 -->
    <a href="#" class="jcm-top"><img src="http://ts.daumcdn.net/custom/blog/80/804656/skin/images/arrow-up.png" style="margin-bottom: 24px;width: 25px;"></a>
</body>

<!-- 텍스트나 아이콘폰트로 버튼만들려면 -->
   <a href="#" class="jcm-top"><i class="icon icon-arrow-up"></i></a>
</body>

<!-- 두개 방식 중에 하나를 추가해주세요. -->

만약 이미지를 첨부하실 분은 아래 이미지 또는 다른이미지를 준비하고 파일업로드를 해주세요.

텍스트나 아이콘폰트를 사용하실분들은

<i class="icon icon-arrow-up"></i>

에 작성하시거나 그대로 해당 아이콘 폰트를 사용하시면 됩니다.

제가 사용하는 ccz-cross스킨에는 아이폰폰트가 포함되어있어 저는[ ]아이콘 폰트를 사용하려고 합니다.



맨위로 가기 버튼 모양속성 주기 - [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;
}

CSS 가장 마지막 부분에 붙혀넣기를 하면 됩니다.

이렇게만 해줘도 버튼이 화면에 고정된 위치에 생겼습니다.

display: none; 값을 가지기 때문에 보이지 않습니다.


나중에rightbottom으로 위치를 지정하거나

widthheight로 버튼 크기를 수정할 수 있습니다.


이제 자바스크립트를 사용해 일정 위치로 내려가면 해당값을 보이게 바꾸고

클릭시 스크롤업을 해서 맨위로 올라가는 기능을 줄겁니다.


javascript로 맨위로 버튼 기능 만들기 -[HTML]에 소스추가


	  <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>

200 정도 아래면 버튼이 나타나며 제일위로 400의 속도로 올라갑니다.

수치를 조정할 수있습니다. </body> 위에 붙혀줍니다.

스크립트 파일로 정리해서 붙혀넣기 하는 방법도 있는데 

코드가 짧으므로 그냥 html에 붙혀넣기 해줍니다!


보통 대부분의 강좌들이 여기서 끝나던데..

버튼이 뭔가 밍밍해서 -ㅠ- 버튼효과를 줍니다.

마우스가 올라가면 색이 변하도록 스크립트를 추가해줍니다.


버튼에 마우스 오버시 배경색 변경 만들기 -[HTML]에 소스추가

내용추가 굳이 스크립트 없이 CSS 로 hover가 가능하기 때문에 이부분은 다시 수정하겠습니다.

이방법은 그냥 스크립트로도 이렇게 가능 하다고만 생각 하시면 됩니다.


	<script>
$(document).ready(function(){
	$('.jcm-top').hover(
		function(){
			$(this).css("backgroundColor", "#000").css("opacity", 0.5);
		},
		function(){
			$(this).css("backgroundColor", "#323232").css("opacity", 0.5);
		}
	);
});
</script>
</body>

최종적으로 확인해보면 다음과 같겠죠?!!

 위방법 처럼 해도 되지만 간단하게 CSS로도 가능합니다.

위 방법 보다 CSS 수정에서 아래 방법으로 해주세요!!

CSS에 hover 속성 추가 붙혀넣기


a.jcm-top:hover{background-color:#000}

투명도는 전부 기존 속성에서 상속 받기 때문에

배경색만 바꿔줘도 마우스오버 효과를 받을 수 있습니다.

최종 완성 모습

다들 그럼 손쉽게 맨위로 버튼을 만들어 보시길 바랄게요!^^




신고

댓글을 달아 주세요

  1. 2016.02.10 05:25

    비밀댓글입니다

    • BlogIcon COCOSOFT COCO Media 2016.02.11 00:09 신고

      알겠습니다!! 사이드바 로고 달리 같은것도 추가로 올리겠습니다. 아마 http://cocosoft.kr/354 이것을 보면 조금이나마 도움이 될것같아요!! 블로그에 이미지를 배치하는 방법입니다!! 많은곳에 적용이 될것같아요!

  2. BlogIcon SONYLOVE 2016.02.10 12:31 신고

    요즘 CCZ 스킨 관련된 글로 도움되는 글을 많이 올려주시니 감사합니다. ㅎㅎ
    한동안 저도 열심히 고치다 얼마전엔 검색결과 표시가 되다 안되다 해서 그냥 냅두고 있어요..
    뭔가 꼬인거 같긴 한데..ㅠ.ㅠ

    • BlogIcon COCOSOFT COCO Media 2016.02.11 00:11 신고

      저도 ㅠ 초보자라서 스킨테스트용에 먼저 테스트해보고 적용하는데도 문제가 발생해서 ㅠ_ 몇번이나 스킨 적용을 다시하는지 몰라요 ㅎㅎ 그래도 블로그 꾸미는 것은 재밌네요!! 최근 설연휴라서 거의 하루에 하나씩 포스팅을 했는데 이제는 조금 ㅠ 주말마다 꾸준히 적용해보고 올려야겠습니다! ㅎㅎ

  3. BlogIcon 세모뷰 2016.02.16 01:09 신고

    정말 코코소프트님의 정성 가득한 포스팅에 항상 감사하게 생각하고 있어요~
    조금씩 CCZ스킨에 기능이 추가되는것 같아요.
    문제는 로딩속도가...모바일에서 5분이 넘어가서 정말 큰일이네요.
    썸네일 치환자 포스팅을 보고 적용시켜도 전 별로 안빨라지더라구요 ㅠㅠ

    • BlogIcon COCOSOFT COCO Media 2016.02.16 01:49 신고

      안녕하세요!! 확인해보니 속도는 빠르게 나오는 것을 보여요! ㅎㅎ
      반응형웹이다보니 ㅠ 모바일웹은 스마트폰 기종에 따라서 속도차이가 조금은 날거에요 일반 PC로 접속하는것 보다는요.

      그리고 CCZ-CROSS 스킨에는 자체적으로 fouc 처리가 되어있어서

      이게 로딩의 연속성이 더 오래 걸리는 것처럼 느껴지실거에요.
      fouc처리는 화면깜빡임 방지로 페이지를 로딩할때 블로그형태가 처음 깨지는 것을 방지해 주는 효과가 기본기능으로 되어있습니다!

      만약 해당부분의 fouc 효과를 없애보면 더빨리 로딩한다고 느껴지실거에요. 저는 블로그 본문영역만 해지를 해놓았습니다.
      <div class="e-content post-content fouc"></div> 이부분을
      <div class="e-content post-content"></div> 이런식으로요

      만약 메인화면의 처리를 바꾼다면 <div class="list-row pos-left ratio-fixed ratio-4by3 crop-center lts-narrow fouc clearfix"> 이부분에서 fouc 를 삭제 하면 될것에요. 그러면 가시성?에서 빠르게 로딩하는 것처럼 보입니다!^^ fouc 처리를 하면 블로그 전체 페이지가 안정적으로 느껴져서 깨짐현상없이 처음방문객에게 보여질수있지만 눈에 보이는게 늦게 뜨다보니 로딩이 느리게 느껴지는효과가 있는것같아요. 기호에 맞게 fouc를 선택하시면 될거에요!

    • BlogIcon 세모뷰 2016.02.16 13:44 신고

      와...정말 친절하고 자세한 답변 감사합니다. ㅠㅠ
      코코소프트님 덕분에 많은거 배우네요.
      혹시 add this recommend 박스 적용스키는 방법도 아시나요?
      다른 반응형 블로그는 잘 나오는데.. CCZ-CROSS스킨에서는 html에 넣거나 사이드바에 추가를 해도 나오지 않아서요.

    • BlogIcon COCOSOFT COCO Media 2016.02.16 17:21 신고

      addthis 는 예전에 한번 설치했다가 느려서 지웠던 기억이 있는데 ㅠ_ㅠ 지금은 보니깐 꽤 빨라지고 괜찮게 업데이트 된것 같더라구요! 한번 보조블로그에 테스트를 해보겠습니다!! ㅎㅎ

    • BlogIcon 세모뷰 2016.02.16 17:24 신고

      어제 페이지 로딩이 느려서 한숨도 못잤더니 회사에서 골골 거리네요ㅎㅎ 보조블로그에 테스트까지! 감사합니다..

    • BlogIcon COCOSOFT COCO Media 2016.02.17 13:36 신고

      addthis 추천 박스를 알아보니 이건 블로그의 기사 분석을 하고 추천하는데 시간이 걸리는 것 같습니다.

      다른 버튼들은 바로 적용되는데 추천박스는 뜨지 않더라구요.
      addthis도움말을 보니깐 자체 알고리즘에 의해서 분석해서 제공되기 때문에 조금 늦게 뜨거나 보이지 않는것같습니다. 기다리면 나오던가

      아니면 월마다 10달러씩 내고 프로버전을 쓰면 더 세세하게 옵션 선택을 할수있다고 하더라구요; ㅎㅎ 그냥 설치후 기다리시면 추천박스가 뜰 것같습니다!

    • BlogIcon 세모뷰 2016.02.17 13:38 신고

      감사합니다. 하루 지나도 안나와서 안되는건줄 알았네요.. 로딩 속도 때문에 이미지들 전부 gif로 바꾸고 있네요ㅎㅎ

  4. BlogIcon Sacrificorate 2016.02.16 19:02 신고

    반대로 아래로 내리기는 어떻게 해야 하나요...?

    • BlogIcon COCOSOFT COCO Media 2016.02.21 17:11 신고

      맨아래로 가는 버튼은 <a href="#" 에서 # 이부분을 #site-footer

      로 바꿔주시면 됩니다.

      그런데 footer부분은 스킨마다 id 명이 다를 수가 있어요.

      그냥 #footer 인 스킨도있고 제가 사용하는 ccz-cross 는 #site-footer 로 되어있어서

      확인하시고 수정하시면 될 꺼같습니다!!^^

  5. BlogIcon SONYLOVE 2016.03.02 15:18 신고

    맨위로 버튼 없이 그냥 버티고 있었는데 글 참고해서 이참에 하나 달았습니다. ㅎㅎ

    • BlogIcon COCOSOFT COCO Media 2016.03.02 16:17 신고

      하나정도있는 것은 괜찮더라구요 ㅎㅎ 모바일에서도 쉽게 주소창으로 올라갈 수 있구요 ㅎㅎ 분홍색 모양이 예쁘네요!!

    • BlogIcon COCOSOFT COCO Media 2016.03.02 18:54 신고

      소니러브님 수정사항입니다!! ㅠ_ㅠ

      굳이 스크립트를 사용하지않고 CSS hover만으로도 마우스 오버 효과를 줄수있더라구요.
      <script>
      $(document).ready(function(){
      $('.jcm-top').hover(
      function(){
      $(this).css("backgroundColor", "#e0557d").css("opacity", 0.7);
      },
      function(){
      $(this).css("backgroundColor", "#e0557d").css("opacity", 0.9);
      }
      );
      });
      </script>
      이 스크립트를 지우시고

      CSS에서
      a.jcm-top:hover{opacity:0.7;filter:alpha(opacity=70);}

      이렇게만 추가해주셔도 될 것 같습니다^^;;
      저도 다른분 질문 받다보니 봤는데 왜 마우스오버 굳이 스크립트로 만들었지??하고 생각했네요 ㅎㅎ;;

    • BlogIcon SONYLOVE 2016.03.02 18:57 신고

      이게 저도 좀 이상하긴 했는데 나름 효과를 포함하고 있긴 하더라고요. -.-;
      마우스 올리고 두번째 사용할때는 완전 처음 상태가 아닌 다른 색상으로도 표현된다는..
      근데 별로 쓸데 없는 기능같긴 하더라고요. -.-;

    • BlogIcon COCOSOFT COCO Media 2016.03.02 19:07 신고

      그러니깐요 ㅠ_ㅠ 이제 좀 불필요한 ㅋㅋ 스타일 파일이라든지 한번 쭉 한번 보고 합칠수있는것은 합쳐버릴려구요ㅎㅎ 폰트 css도 굳이 따로 필요없을꺼같아서 지우고 reset.css에 집어넣어버렸어요

    • BlogIcon SONYLOVE 2016.03.02 20:01 신고

      여기저기 나눠져 있는 파일들을 합치는 것도 좋은 방법이겠네요.
      저도 나중에 해봐야겠습니다. ㅎㅎ

  6. 보보 2016.03.02 16:14 신고

    스크롤 내리지 않아도 항상 보이게 하려면 어떻게 해야하나요?
    scrollTop() > 0
    이렇게 입력해도 스크롤이 보이던데..ㅠ

    • BlogIcon COCOSOFT COCO Media 2016.03.02 18:25 신고

      아 그건 스크립트를 사용하지마시고

      그냥 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;
      }

      이부분에서 display: none;을 display:block; 교체해주시면 됩니다.

    • 보보 2016.03.03 12:16 신고

      감사합니다. 잘되네요^^

  7. 2016.03.22 18:04

    비밀댓글입니다

  8. 인삼향기 2016.03.22 18:08 신고

    많은 참고를 하고있는데요 다름이 아니오라.아래링크처럼 http://batterypowerplus.co.kr/ex/sub_01.html
    버튼 화살표가 박스안에서 위로 쏠림현상있는데 어떻게 해야될까요?

    • BlogIcon COCOSOFT COCO Media 2016.03.22 20:53 신고

      우선 가장 간단하게 하시는 방법은
      <img src="images/sub01/arrow-up.png" style="margin-bottom:24px; width:25px;">

      여기서 margin-bottom:24px을 margin-top:10px로 교체를 해주시면 중앙에 위치를 할 것 같습니다!

      다른방식은 div박스로 감싸준다음 속성을 설정해서 가운데 오게 하는 방식이 있는데 http://webdir.tistory.com/31 이글을 참고하시면 많은 도움이 될 것같아요!!

  9. 돌구 2016.09.09 13:03 신고

    유용하네요 잘보고 갑니다^^

티스토리 툴바