티스토리 맨 윗부분으로 올라가는 화살표 스크롤버튼 넣는 방법
- Etc
- 2021. 5. 6. 17:55
다른 블로거분들의 잘 정리된 글을 정독해서 읽다보면 나도 모르게 스크롤을 저 밑에까지 내리는 경우가 많습니다. 이렇게 읽다가 다시 위쪽으로 돌아가고 싶을 때 다시 마우스휠을 위로 돌돌돌 올리는 것이 여간 귀찮은 일이 아닙니다.
이러한 귀차니즘을 해결하기 위한 자바스크립트 기능이 있습니다. 바로 아래 캡쳐화면에서 붉은색으로 표시한 저 화살표입니다. 블로그 서핑좀 하시는 분들이라면 많이 보신 스크롤버튼일 것입니다.
지금 보고 계신 이 글도 스크롤을 조금만 내리시면 다시 맨 처음으로 돌아가게 할 수 있는 버튼이 오른쪽 하단에 위치해있는 것을 확인하실 수 있을 것입니다.
자바스크립트는 문법이 정말 어렵지만, 어렵다는 것이 문제가 되지 않습니다. 왜냐하면 기존에 누군가가 만들어놓은 아주 훌륭한 스크립트 코드를 적절한 검색어로 검색만 하면 누구나 쉽게 구할 수 있기 때문입니다.
이 글을 보고계신 분들도 대부분 티스토리 블로그를 운영하시는 분들일 것입니다. 본문 맨 윗부분으로 올라가게 하는 화살표 스크롤버튼을 블로그에 넣기 위해 검색하다가 들어오셔서 답을 찾아가시게 된 것입니다.
티스토리 오른쪽 하단에 스크롤 버튼을 넣는 방법은 다음과 같습니다.
1. 먼저 티스토리 스킨편집 화면에서 HTML편집으로 들어가신 후, 아래 자바스크립트 소스를 <body>와 </body> 사이의 적당한 곳에 붙여넣습니다. 저는 body가 끝나는 부분인 </body>의 바로 위쪽에 붙여넣습니다.
<!-- 스크롤버튼 -->
<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>
2. 다음으로 CSS편집으로 들어가신 후, 아래의 소스를 적당한 곳에 붙여넣습니다. 저는 제가 추가로 넣는 CSS기법들의 소스는 맨 하단에 추가하는 습관을 들이고 있습니다.
/* 스크롤버튼 */
a.topScrollButton {
position: fixed;
right: 30px;
bottom: 30px;
border-radius: 0px;
color: #ffffff;
text-align: center;
width: 50px;
height: 50px;
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}right 값은 화살표가 오른쪽에서 떨어진 정도입니다. 수치를 크게 하면 오른쪽 스크롤바에서 점점 더 멀어지게 됩니다. 마찬가지로 bottom 값은 아래쪽에서 떨어진 정도입니다. border-radius 값은 스크롤버튼의 테두리 모양입니다. 0px이면 모서리가 뾰족한 사각형, 1~29px로 갈 수록 점점 둥그런 모양이 되다가 30px을 입력하면 정 원 모양이 나옵니다.
블로그 본문 상단으로 바로 이동하게 만들어주는 화살표 스크롤 버튼 다는 법을 살펴보았습니다.
'Etc' 카테고리의 다른 글
| 주식을 끈질기게 보유한 사람들은 항상 보상받았다. 제러미 시겔 (0) | 2021.05.10 |
|---|---|
| 티스토리 마우스 클릭시 원형 파동 만들어지는 효과 (2) | 2021.05.08 |
| 2021년 가상화폐의 엄청난 거래대금을 보면서 (4) | 2021.05.07 |
| 현재까지의 급여외 수익 정리. 파이프라인을 확장하고 키우자! (4) | 2021.05.07 |
| 티스토리 본문글 밑줄에 두꺼운 형광펜 효과 주기 (8) | 2021.05.05 |
| 티스토리 상단 스크롤바(진행바, 프로그레스바) 넣는 방법 (0) | 2021.05.05 |
| 2021년 미국증시 휴장일, 주식 거래시간, 폐장일, 개장일, 서머타임 정리 (0) | 2021.05.05 |
| 티스토리 스킨과 본문에 무료 웹폰트 적용하는 간단한 방법(눈누, 구글폰트) (2) | 2021.05.05 |