개요
참고 : HTML Snippets for Twitter Boostrap framework : Bootsnipp.com
모바일 환경에서 편리하게 페이지 내에서 이동할 수 있도록, 오른쪽 하단에 back to top 버튼을 추가하였습니다. 화면이 아래로 스크롤되면 왼쪽 하단에 표시되며 누르면 스크롤되어 페이지 상단으로 이동하는 기능입니다.
back to top 버튼 추가
작업은 티스토리의 스킨편집창에서 진행합니다.
단순한 기능이지만 조금더 멋스럽고 자연스럽게 화면을 스크롤해주고 툴팁이 사라지는 등의 애니메이션 기능이 필요하기 때문에 Jquery 라이브러리를 변경해주어야 합니다.
html 항목을 선택한 후, 아래의 소스코드를 <body> 태그 아래에 추가하였습니다.
<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Click to return on the top page" data-toggle="tooltip" data-placement="left"><i class="fas fa-angle-up"></i><br>Top</a>
기존 수정들과 달리 html 뿐만 아니라 CSS 및 JS 항목도 수정이 필요합니다.
css 항목의 가장 하단에 다음의 코드를 추가합니다.
.back-to-top {
cursor: pointer;
position: fixed;
bottom: 20px;
right: 20px;
display:none;
z-index: 99; /* Make sure it does not overlap */
}
JavaScript 를 수정해야 하지만, Javascript는 티스토리에서 직접적인 수정이 불가합니다. 때문에 최초에 다운로드하였던 기본 템플릿의 script.js 파일을 VS Code 와 같은 텍스트 에디터를 사용하여 열고 코드의 가장 하단에 아래의 코드를 추가합니다.
그리고 티스토리의 스킨 관리 도구를 사용하여 수정된 파일을 업로드합니다.
[수정후 - 현재 버전]
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('#back-to-top').tooltip();
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
$('#back-to-top').tooltip('hide');
}
});
// scroll body to 0px on click
$('#back-to-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
오류수정 - 초기 로딩 시 항상 버튼이 표시되는 오류
참고 : stackoverflow - Sticky “back to top” button showing on page load, before scrolling down
블로그에 접속하면 top 페이지에서 조차도 항상 버튼이 표시되는 현상이 있었습니다. 참고 페이지의 답변과 같이 html 코드에 다음과 같이 style="display:none를 추가하였습니다.
[수정후 - 현재 버전]
<a id="back-to-top" class="btn btn-primary btn-sm back-to-top" role="button" title="Click to return on the top page" style="display:none" data-toggle="tooltip" data-placement="left"><i class="fas fa-angle-up"></i><br>Top</a>
여기까지가 현재 블로그에 적용된 스킨을 기본 템플릿을 다운로드한 후, 수정한 내용이었습니다.
'티스토리 > 스킨제작' 카테고리의 다른 글
| 티스토리 스킨 제작기 - 카테고리 메뉴 변경 (0) | 2018.08.29 |
|---|---|
| 티스토리 prismjs 구문강조(syntax highliter) 적용하기 (0) | 2018.06.30 |
| 티스토리 스킨 제작기 - 본문 (0) | 2018.06.29 |
| 티스토리 스킨 제작기 - 사이드바 (0) | 2018.06.25 |
| 티스토리 스킨 제작기 - Footer 수정 (0) | 2018.06.24 |
