[jQuery]티스토리 맨위로 버튼(스르륵 부드러운 스크롤 이동 만들기)

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

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

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>

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

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

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

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

제가 사용하는 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; 값을 가지기 때문에 보이지 않습니다.

나중에right 및 bottom으로 위치를 지정하거나

width 와 height로 버튼 크기를 수정할 수 있습니다.

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

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

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 수정에서 아래 방법으로 해주세요!!