최대한 간단하게 top-button 추가하기 + bottom-button 추가

다른 사람들의 티스토리를 볼 때 항상 top-botton이 따라다녔던 것 같은데, 내 블로그는 아니네....?
이것도 개인적으로 설정해줘야 하는 지 몰랐다.....

검색해보니 원하는 버튼의 이미지를 첨부하는 등 귀찮아보였는데, 블로그 자체 하단에 top-botton이 있어서 이를 활용하면 되겠다고 생각이 들어서 해당 이미지를 활용!

footer의 이미지 활용

(스킨 파일을 다운로드하면 이미지 파일이 2개 존재...똑같은 디자인인데 크기 차이인 듯)

적용 결과

1. HTML 편집

1) 위치 : body 태그 안에 넣으면 될 것 같음
(나는 wrap -> container -> content-wrap 내부에 넣어줬다.)

2) 코드 : footer에 있는 태그를 그대로 이용

추가하면 되는 코드
<a href="#" class="page-top">TOP</a>

<!--(대략 767줄) 참고한 코드-->
<footer id="footer">
		<div class="inner">
			<div class="order-menu">
				<s_if_var_order-link-1-title>
                생략
			</div>
			<a href="#" class="page-top">TOP</a>
		</div>
	</footer>
</div>

2. CSS 편집

1) 위치 : 아무 곳
2) 코드 : 마찬가지로 .page-top의 코드를 이용

/*추가한 코드*/
/*top 버튼*/
.page-top {
	position: fixed;
	bottom: 100px;
	right: calc(28% - 300px);
	width: 60px;
	height: 60px;
	border: 1px solid #eee;
	border-radius: 50%;
	background: #eee url(./images/ico_package_2x.png) no-repeat -200px -400px;
	text-indent: -999em; /*top이라는 글씨가 안 보이게 됨*/
}

- position 을 fixed로 바꿈
- background의 이미지를 (두 배로) 큰 이미지인 _2x로 바꿔주었고, 이에 맞게 width와 height도 두 배로 변경
- 개인에 맞게 top/bottom, right를 변경해주면 된다.
- text-indent를 지우면 TOP이라는 글씨가 못생기게 보인다.
- 필요시 z-index를 추가하면 될 것 같다.

 

2021-11-10(수) 추가

3. Bottom-button 추가하기

1) HTML

① head 태그 태부에 추가하면 된다고 했는데, 나는 head에 추가했을 땐 안 됐다. 그래서 top-button 아래에 추가해줬더니 실행됨

② </body>가 끝나기 전에 추가하면 된다고 했는데, 각종 script를 추가해서 그런지 위치를 알기 쉽지 않았다.
body의 <div id='wrap'>이 끝나기 직전에 추가해줬더니 실행됐다.

2) CSS

마찬가지로 다른 이미지 첨부해주지 않았고, 스킨 자체에 있던 이미지 사용
--> 위에서 이용한 코드를 그대로 복사해서 노란 줄만 변경해주었다.
- 이미지를 뒤집어 줘야 했기 때문에 transform : rorate를 사용함

마무리

bottom-button은 아쉽게도 애니메이션?효과가 적용되지 않았다....
bottom-button을 누르면 주소에 #gofooter가 붙는 건 아쉽다.

 

참고 글(bottom button)

1. bottom button
출처:https://dakmarketing.tistory.com/entry/티스토리-버튼-만들기-HOME-TOP-BOTTOM-버튼#gofooter[닥치고 마케팅]
- 해당 코드에서 script는 사용하지 않음
https://zynar.tistory.com/11

2. id, class 선택자
- id -> #아이디 { 속성1 : 속성값; 속성2:속성값 }
- 클래스 -> .클래스명 { 속성1 : 속성값; 속성2:속성값 }
https://ofcourse.kr/css-course/id-class-%EC%84%A0%ED%83%9D%EC%9E%90

3. CSS 이미지 회전
https://nine01223.tistory.com/207
https://kingji8life.tistory.com/133