티스토리 블로그 : 최상단으로 올라가는 버튼 만들기

티스토리 블로그는 네이버 블로그에 비해서 여러가지를 수정할 수 있다는 점에서 매우 재밌다. 티스토리 안에 설치된 서버를 바꿀 수는 없지만 html/css/javascript를 조금만이라도 알고 있으면 블럭 끼워맞추는 식으로 나만의 홈페이지를 만들 수 있기 때문이다. 사실 워드프레스로 하는 게 훨씬 자유도가 높으나 너무 무거운건 싫다.

 

물론, 네이버와 같은 폭풍 유입은 절대 기대할 수도 없지만, 나만의 왕국을 만드는 데에는 정말 좋다. 늘 원하는 기능을 추가하고 뜯어고치고 얼마나 편하고 재미있는지...

최상위로 올라가는 버튼 만들기

올라가는 버튼은 <a></a> tag를 이용해서 만들수도 있으나, 링크를 통해서 올라가는 것이 아니라 연속적으로 변하는 것을 구현하기 위해서는 자바스크립트의 도움이 필요할 듯했다. 

 

J쿼리를 이용하였다.

자바스크립트밖에 모르지만, html 안에 script 태그 치고 연결하면 된다. 엄청 지저분한 코드이겠지만. 나는 전문 개발자는 아니니깐 이 정도는 스스로 용납할 수 있다. 티스토리는 J쿼리를 원래 이용하고 있기 때문에 특별한 문제 없이 구현되었다. a 태그를 통해 버튼을 만들어주는 것이고, a 태그 안에 스크립트와 CSS를 통해서 콘텐츠가 들어가니깐 CSS도 작성해주어야 한다. 

back-to-top을 클릭하면 scroll top animation 한다는 뜻인 듯

이 스크립트는 다른 블로그에서 퍼왔는 것인데... 어느 블로그에서 퍼왔는지 웹페이지가 꺼져서 잃어버렸다 ㅠㅠ 기능을 잘하고 있으니 이 정보를 제공하셨던 분에게는 죄송할 따름이다.

 

스크롤을 일부 내려야만 화면에 버튼이 노출

처음 웹사이트에 접속하면 버튼이 보이지 않는다. 그것은 back-to-top을 id로 가진 녀석들을 100이라는 숫자가 안 되면 안 보이게 설정해두었기 때문이다. 저기에서 숫자(100)만 변경하면 원하는 부위부터 나타나게 변경할 수 있다.

전체 코드

다른 부위에 넣어도 좋으나 html 가장 마지막 부분에 있는 footer에 집어 넣었다. 왜? 아무것도 없이 비어있길래... 그리고 그 자리가 적절한 듯 해서 넣었다.

	<footer id="footer">
	<a id="back-to-top"></a>
		<script>
			$(function(){
   		 $('#back-to-top').on('click',function(e){
            e.preventDefault();
            $('html,body').animate({scrollTop:0},600);
  });
  $(window).scroll(function() {
    if ($(document).scrollTop() > 100) {
      $('#back-to-top').addClass('show');
    } else {
      $('#back-to-top').removeClass('show');
    }
  });
});
			</script>
		
	</footer>

CSS 전체 부분

background-color를 #FF9800 으로 설정하고 버튼 크기를 50px,50px로 변경하였다. 다른 곳에 이용하려면 Width, height, bottom, right를 변경하면 될 듯하다. 처음에 이 코드를 받아온 곳에서는 fontawesome을 이용하여 예쁜 화살표를 이용하였으나 fontawsome은 현재 버전이 바뀌어서 그런지 적용이 되지 않아서  '▲'을 이용하였다. back-to-top을 hidden 을 통해서 숨기고 J-query로 class를 추가하면서 visible하게 바꾸는 방식. 

 

추후 hover나 active가 필요없으면 해당부위는 지워도 될 듯하다. 

#back-to-top {
  display: inline-block;  
  background-color: #FF9800;
  width: 50px;
  height: 50px;
	border-radius: 7px;
	box-shadow: 0 7px 9px rgba(0,0,0,0.3);
	transition: background-color .3s, 
    opacity .5s, visibility .5s;
  text-align: center;
  position: fixed;
  	bottom: 50px;
  	right: 25px;
    opacity: 0;
  visibility: hidden;
  z-index: 1000;
	
}
#back-to-top::after {
  content: "▲";
  font-weight: normal;
  font-style: normal;
  font-size: 1.5em;
  line-height: 50px;
  color: #fff;
}
#back-to-top:hover {
  cursor: pointer;
  background-color: #333;
}
#back-to-top:active {
  background-color: #555;
}
#back-to-top.show {
  opacity: 1;
  visibility: visible;
}

결과 이미지