티스토리) 본문 상단으로 이동하는 스크롤 버튼 적용하기

티스토리) 본문 위로 이동하는 스크롤 버튼 적용 알아보기

안녕하세요.

요즘 포스팅을 너무 못하고 있네요. ㅠㅠ

다른 일에 집중을 하다 보니 소홀해졌다는 핑계를 될 수밖에 없네요 ㅠㅠ

콩냥이(여친님)도 옆에서 포스팅을 안한다고 구박줘요. ㅋㅋㅋㅋㅋㅋㅋ

 

이번 포스팅은 제 포스팅 중에 '티스토리 Magazine 스킨으로 바꾸다' 글에 댓글을 달아주신 '블린이'님의 궁금증을 해결해 드리려고 작성하게 되었어요.

 

문의하신 내용은 '티스토리 본문 위로 이동하는 스크롤 버튼 적용 방법'이었어요.

저의 본문을 읽으면서 아래로 스크롤을 하면 오른쪽 하단에 나타나는 본문 글을 상단으로 올라가는 화살표 박스가 보일 거예요.

오늘은 이 내용을 다뤄보도록 할게요^^

 

[Review/Blog Review] - 꽁냥이 블로그) 티스토리 Magazine 스킨으로 바꾸다!

꽁냥이 블로그) 티스토리 Magazine 스킨으로 바꾸다!

 

본문 위로 올리는 스크롤 버튼 적용을 위해 티스토리 설정 html 편집으로

저는 새로운 것을 알고 티스토리 등에 적용을 하게 되면 개인적으로 분석을 하려고 해요.

하지만 이 이동 스크롤 버튼 코드는 분석을 아직 안 했더라고요. ㅎㅎ

해야지 해야지 했는데 엄청 귀차니즘이 발동을 해서 넘어 갔었나봐요. ㅎㅎㅎ

그리고 스킨을 바꾸고 이것저것 적용하면서 웹서핑을 하며 얼른 적용을 하고 빨리 홈페이지를 활성화하는데 급급했던 거 같아요.

 

이번 기회에 조금 분석을 해보도록 할게요.

 

아래의 코드를 적용하기 위해서는 티스토리 설정의 '꾸미기 > 스킨 편집 > html 편집'으로 진입을 해요.

본문 내용의 위로 올라가는 스크롤 버튼은 html에 적용되는 자바 스크립트 코드, 버튼과 화살표를 꾸며주는 CSS 코드 이렇게 두 개의 코드로 이루어져 있어요.

 

그럼 하나씩 살펴보도록 하겠습니다.

 

티스토리 본문 위로 올리는 스크롤 버튼 html 코드 및 코드 분석

html에 적용할 코드는 자바스크립트로 되어 있어요.

자바스크립트는 정적인 웹페이지를 동적으로 만들어 줍니다.

 

본문 위로 올리는 스크롤 html 코드 및 적용 위치

html에 적용되는 자바스크립트 코드는 다음과 같아요.

<!-- 화살표 -->
<script src="https://unpkg.com/ionicons@4.5.9-1/dist/ionicons.js"></script>
<a href="#" class="topScrollButton"><ion-icon name="arrow-round-up"></ion-icon></a>
<script>
	$( document ).ready( function() {
		$( window ).scroll( function() {
			if ( $( this ).scrollTop() > 100 ) {
				$( '.topScrollButton' ).fadeIn(); }
			else {
				$( '.topScrollButton' ).fadeOut(); } } );
		$( '.topScrollButton' ).click( function() {
			$( 'html, body' ).animate( {
				scrollTop : 0 }, 500 ); return false; } );
	} );
</script>
</body>

코드에서 알 수 있듯이 넣어주는 위치는 html에서 '</body>' 태그 위에 넣어주면 돼요.

 

 

본문 위로 올리는 스크롤 html 코드 분석

코드 내용을 살펴보도록 할게요.

코드	설명
<script src="https://unpkg.com/ionicons@4.5.9-1/dist/ionicons.js"> </script>	아이콘을 사용하기 위한 자바스크립트 적용
<a href="#" class="topScrollButton"> <ion-icon name="arrow-round-up"> </ion-icon></a>	아이콘을 버튼으로 인식하기 위한 링크 태그 (사실은 버튼이라기 보다는 페이지에 이미지를 그리고 링크를 만드는 작업입니다.) name을 변경하면 버튼의 아이콘을 바꿀수 있습니다. 아이콘은 밑에 소개한 ionic 사이트를 참고 하시면 됩니다.
$(window).scroll(function(){ if($(this).scrollTop()>100){ $('.topScrollButton').fadeIn();} else{ $('topScrollButton').fadeOut();}});	인터넷 브라우저의 스크롤 동작시 버튼이 보이는 것을 설정합니다. 저는 100으로 설정이 되어 있는데요. 숫자가 커질수록 더 밑으로 스크롤시 버튼이 보이게 합니다.
$('.topScrollButton').click(function(){ $('html, body').animate( {scrollTop:0},500); return false;});	위로 올라가는 버튼을 클릭했을 때 화면 상단으로 올라가는 빠르기를 설정합니다. 저는 500으로 설정이 되어 있습니다.(단위는 ms입니다.) 숫자가 커질 수록 느린 속도로 상단으로 이동이 됩니다.

 

본문 위로 올리는 스크롤 아이콘 참조 사이트

저는 별도의 이미지가 아닌 웹, iOS, Android에서 사용할 수 있는 무료 디자인 아이콘인 'Ionicons'를 사용하여 버튼을 만들었습니다. 무료 오픈 소스 프로젝트의 일환으로 개인 또는 상업  프로젝트에서 무료로 사용할 수 있다고 해요.(20.05.16 확인)

https://ionicframework.com/docs/v3/ionicons/

Ionic Framework

위 페이지에 들어가셔서 원하시는 아이콘을 적용하시면 돼요.

 

티스토리 본문 위로 올리는 스크롤 버튼 CSS 코드 및 코드 분석

CSS는 버튼의 모양을 꾸며 줘요.

 

CSS 코드 및 적용 위치

CSS 코드는 다음과 같아요.

/* 화살표 */
a.topScrollButton {
	position: fixed;
	right: 30px;
	bottom: 30px;
	border-radius: 10px;
	color: #ffffff;
	text-align: center;
	width: 65px;
	height: 65px;
	font-size: 50px;
	font-weight: bold;
	/*background-color: rgba(50,50,50,0.5);*/
	background-color:#323232;
	opacity:0.5;
	/*InternetExplower 호환을 위한 부분 호환이 필요없으면 한줄로 rgba 기입*/
	filter:alpha(opacity=50);
	z-index: 999;
	display: none; }
a.topScrollButton:hover{background-color:#0f4c81}

CSS 코드는 티스토리 CSS 부분에서 제일 하단에 넣으면 돼요.

 

CSS 코드 분석

중요한 부분만을 살펴보도록 할게요.

display: none;화면 스크롤이 되지 않을시 화면을 그린 상태에서 숨겨 줌display: none;화면 스크롤이 되지 않을시 화면을 그린 상태에서 숨겨 줌

코드	설명
position: fixed; right: 30px; bottom: 30px;	position으로 요소를 겹치게 하여 오른쪽 하단에 배치
border-radius: 10px;	버튼 외곽을 둥글게 함
color: #ffffff; text-align: center;	아이콘의 색상과 버튼 박스 안의 아이콘 위치
width: 65px; height: 65px;	버튼 박스 사이즈
font-size: 50px; font-weight: bold;	버튼 안의 아이콘 사이즈
background-color:#323232;	버튼 박스 색상
opacity:0.5; /*InternetExplower 호환을 위한 부분 호환이 필요없으면 한줄로 rgba 기입*/ filter:alpha(opacity=50);	버튼 박스의 투명도 ie8의 경우 추가되는 투명도 코드
z-index: 999;	레이어 순서를 정해주는 것으로 '999'으로 화면 제일 위에 배치
display: none;	화면 스크롤이 되지 않을시 화면을 그린 상태에서 숨겨 줌
a.topScrollButton:hover{ background-color:#0f4c81}	마우스를 올리거나 눌렀을 때의 색상 지정

 

jQuery를 이용한 웹페이지 문서 위로 이동시키는 버튼 코드

jQuery를 이용하여 웹페이지 문서의 상단으로 이동하는 버튼 링크를 만들어 보았어요.

 

페이지 상단으로 이동시켜주는 버튼 웹페이지에 넣어주기 위해서 사용된 두개의 코드인 html에 적용하는 코드와 CSS에 적용하는 코드를 살펴 보았어요.

코드의 필요한 부분에 대한 설명을 했어요.

수정을 원하시는 부분이 있다면 설명을 참고해 주세요.

 

그럼 사용된 코드 파일을 첨부 할게요^^ 많은 도움이 되었으면 해요~

 

html 적용 코드

topButtonScroll HTML 적용 코드.txt

0.00MB

CSS 적용 코드

topButtonScroll CSS 적용 코드.txt

0.00MB

 

티스토리 공유 버튼 관련 글

[Review/Blog Review] - 티스토리에 소셜(SNS) 공유 버튼을 달아 보자! - Facebook 편

[Review/Blog Review] - 티스토리에 소셜(SNS) 공유 버튼을 달아 보자! - Twitter 편

[Review/Blog Review] - 티스토리에 소셜(SNS) 공유 버튼을 달아 보자! - 카카오톡, 카카오스토리 편

[Review/Blog Review] - 티스토리에 소셜(SNS) 공유 버튼을 달아 보자! - 네이버, 밴드 편

[Review/Blog Review] - 티스토리에 소셜(SNS) 공유 버튼을 달아 보자! - FLIPBOARD 편

[Review/Blog Review] - 티스토리 공유 버튼 최종 - 무작정 따라하기 편!

 

저의 글을 읽어 주셔서 감사합니다. 오늘도 즐거운 하루 보내세요.

저의 글이 조금이나마 도움이 되셨다면 로그인이 필요 없는 공감♥ 한번 꾸욱 눌러주세요 하하~