티스토리 뷰
티스토리 반응형 #1 스킨에 탑(Top) 버튼을 만들어 봅시다.
스크롤을 아래로 쭈욱 내리면서 컨텐츠를 보다가 위로 올라가려면 데스크탑에서는 Home 버튼을 누르면 되지만, 모바일에서는 한참을 스크롤해서 올려야 하는 불편함이 있죠?
Top 버튼이 있으면 한번에 위로 올라가기 편리하기 때문에 Top 버튼이 필요합니다.
제 블로그에서 스크롤을 내리면 Top 버튼이 활성화가 되고, 클릭하면 스크롤이 최상단으로 올라갑니다.
우선 탑버튼을 만들려면 Top 버튼 아이콘이 있어야 합니다.
1. 아래 Top 버튼 아이콘중에 마음에 드는 아이콘을 마우스 오른쪽 클릭을 해서 [이미지를 다른 이름으로 저장]해서 top.png로 저장 하세요.
2. 다운로드 받은 아이콘을 [관리]->[꾸미기]->[HTML/CSS 편집] 을 누르세요.
3. 파일다운로드 탭에서 [+추가]버튼을 클릭하여 다운로드 받은 아이콘을 업로드하세요.
4. HTML에서 아래 스크린샷처럼 </body> 바로 위에 아래 코드를 복사하여 붙여넣으세요.
<script type="text/javascript"> $(function(){ $("#gotop").hide(); $(window).scroll(function(){ if($(this).scrollTop() > 100){$("#gotop").fadeIn();} else{$("#gotop").fadeOut();} }); }); </script> <a href="#" id="gotop" style="display:none;position:fixed;bottom:10px;right:10px;z-index:99999999" title="Top"><img src="./images/top.png" border="0"/></a>
위 코드 설명은 아래 코드 주석처리로 설명하겠습니다.
<script type="text/javascript"> $(function(){ $("#gotop").hide(); // 처음에는 탑이미지를 감춥니다. $(window).scroll(function(){ // 스크롤을 할때 if($(this).scrollTop() > 100){$("#gotop").fadeIn();} // 스크롤이 100 픽셀만큼 내려오면 탑아이콘을 fade in 합니다. (서서히 나타납니다) else{$("#gotop").fadeOut();} // 스크롤이 100 픽셀 이하이면 탑아이콘을 fade out 합니다. (서서히 사라집니다) }); }); </script> <a href="#" id="gotop" style="display:none;position:fixed;bottom:10px;right:10px;z-index:99999999" title="Top"><img src="./images/top.png" border="0"/></a> <!-- display:none (화면에서 안보이게 합니다) position:fixed (스크롤이 어느위치에 있든 화면에서 고정된 곳에 위치합니다) bottom:10px (하단에서 10px 위에 위치합니다) right:10px (오른쪽에서 10px 왼쪽에 위치합니다) z-index:99999999 (레이어를 99999999 위에 띄웁니다-탑아이콘을 최상단에 띄우기위해서) --> </body> </html>
위 설명을 참고삼아 본인 취향에 맞게 조정하세요.
예를 들어 처음부터 top 아이콘을 보여주려면, $("#gotop").hide(); 라인을 삭제하고 display:none; 을 삭제하세요.
스크롤을 200 픽셀만큼 더 아래로 내려올때 보여주려면 100이라는 숫자를 200으로 변경하시면 됩니다.
감사합니다. ^^
'IT > 블로그,티스토리' 카테고리의 다른 글
카테고리의 다른 글 목록에 이전, 다음 버튼(페이징) 만들기 (2) | 2016.04.23 |
---|---|
유튜브 동영상 반응형 웹에 삽입하는 방법 (13) | 2016.04.18 |
티스토리 블로그 모든 본문 중간에 글 수정없이 구글 애드센스 반응형 링크 광고 달기 (50) | 2016.04.03 |
티스토리 최신글(최근에 올라온 글) 본문에 추가하기 (27) | 2016.04.02 |
티스토리 반응형 스킨에 PC버전 보기, 모바일버전 보기 버튼 만들기 (4) | 2016.03.24 |
티스토리 블로그에 탑(Top) 버튼 넣는 방법 (15) | 2016.03.23 |
티스토리 반응형 스킨에 구글 애드센스(google adsense) 반응형 배너 적용 방법 (50) | 2016.03.21 |
티스토리(Tistory) 블로그 원본 사진 이미지 보기 (10) | 2016.03.14 |
코드 소스 하이라이트 SyntaxHighlighter 를 수정하여 예쁘게 꾸며봅시다. (0) | 2016.03.11 |
티스토리(Tistory) 블로그에 코드 소스 하이라이트 SyntaxHighlighter 설정 및 활용, 버그 수정 (21) | 2016.03.08 |
티스토리의 새 반응형 웹스킨 '#1' 카테고리 스크롤바와 글갯수 보이기 (29) | 2016.03.07 |
공유하기 링크
댓글
- 열공2020 감사합니다! ^^ 2016.04.12 11:33 신고
- 토마토.. 댓글 감사합니다. 좋은 하루 되세요 ^^ 2016.04.12 12:31 신고
- 뚜띠김 감사합니다 ! 혹시 탑버튼의 위치를 조금 더 위로 올리는 방법 여쭤봐도 될까요? 2016.08.05 14:37 신고
-
토마토..
<a href="#" id="gotop" style="display:none;position:fixed;bottom:10px;right:10px;z-index:99999999" title="Top">
위 태그에서 bottom: 과 right: 의 값을 조정해보시면 위치값이 조정됩니다. 숫자가 크면 클수록 아래에서 높이...오른쪽에서 멀리 이동됩니다. 2018.09.04 18:15 신고 - B형 공대생 좋은 정보 감사드립니다. 2018.03.02 16:24 신고
- 토마토.. 예쁘게 꾸미세요 ^^ 2018.09.04 18:16 신고
- 날고싶은 긍정 친절한 설명 감사합니다. 만들엇어요^~^ 2018.03.13 18:19 신고
- 토마토.. 도움되셨다니 저도 보람있네요 ^^ 감사합니다. 2018.09.04 18:16 신고
- 감사합니다 덕분에 위치조정했습니다 자세한설명 정말 고맙스빈다! 2018.08.09 16:28 신고
- 토마토.. 감사합니다. 좋은 하루 되세요 ^^ 2018.09.04 18:16 신고
- 잠자는 집시 제가 따라서 해봤는데요. 그 저장하라는 화살표 아이콘은 제가 제 노트북에 저장은 했는데, 거기 저장하는게 아닌가요? 붙이라는대로 다 따라 했는데, 여전히 화살표가 안보여요. ㅜㅜ 2018.09.28 17:37
- 토마토.. 2번, 3번을 안하신것 같아요 ^^ 2018.09.28 21:27 신고
- 제이.H 감사합니다. 도움이 많이 되었어요^^ 2018.09.30 16:01 신고
- 풍월량 이제 막 티스토리를 시작했는데 잘 배워갑니다. 감사합니다! 2020.07.22 22:36 신고
-
캐공방TV
감사합니다. 덕분에 탑 버튼 쉽게 복붙해서 넣었습니다.^^
구독하고 갑니다^^ 2020.09.06 14:02 신고
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- 897,553
- Today
- 38
- Yesterday
- 337
링크
TAG
- 포스타 upp
- 디테일링
- 티스토리 스킨
- TDG 블루베리 휠클리너
- 타이어 광택제 비교
- 퓨리스 타이어 광택제
- 티스토리 반응형 스킨
- 해운대
- 타이어 드레싱
- 퓨리스 A34
- 셀프세차
- 티스토리 새 반응형 웹스킨 #1
- 퓨리스 A34 왁스
- 자동차 디테일링
- 티스토리
- 블로그
- 타이어 광택제
- 세차
- 티스토리 반응형 스킨 #1
- 데피니티브 율리시스