맨위로 가는 TOP 아이콘을 블로그의 오른쪽 하단에 넣는 법
- 팁/블로그
- 2019. 1. 3.
728x90
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 100){$("#gotop").fadeIn();}
else{$("#gotop").fadeout();}
});
});
</script>
<a href="#" id="gotop" style="display:none;position:fixed;bottom:30px;right:30px;z-index:99999999" title="Top">
<img src="./images/top.png(파일이름)" border="0"/></a>
Top아이콘 (일반)
무료 아이콘 사이트
https://fontawesome.com/icons?d=gallery
Font Awesome
fontawesome.com
무료 아이콘 사이트에서 arrows로 서치하여 마음에 드는 아이콘을 png 파일로 저장하세요.
블로그 관리 - 꾸미기 -스킨 편집 - 파일 업로드 - top.png (파일 이름) 업로드
블로그 관리 - 꾸미기 - 스킨 편집 - HTML 제일 하단 </body> 앞에 복사해 넣습니다.
[밑에 글은 토마토님 블로그 글 내용을 참고하였습니다. 자세하게 설명되어 있어 좋아요^^]
http://sometimes-n.tistory.com/17?category=175607
티스토리 블로그에 탑(Top) 버튼 넣는 방법
티스토리 반응형 #1 스킨에 탑(Top) 버튼을 만들어 봅시다. 스크롤을 아래로 쭈욱 내리면서 컨텐츠를 보다가 위로 올라가려면 데스크탑에서는 Home 버튼을 누르면 되지만, 모바일에서는 한참을 스크롤해서 올려야..
sometimes-n.tistory.com
<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 위에 띄웁니다-탑아이콘을 최상단에 띄우기위해서)
-->
728x90
'팁 > 블로그' 카테고리의 다른 글
티스토리 구글 서치콘솔 플러그인 연결 실패 해결법 (13) | 2020.04.28 |
---|---|
사이트맵을 만들고 구글, 네이버, 빙에 등록하기 (0) | 2019.06.29 |
블로그에 인피드광고 넣기 (1) | 2019.04.30 |
블로그에 구글번역기를 설치하기 (0) | 2018.09.20 |
티스토리 블로그 폰트 나눔고딕, 제주고딕으로 바꾸기 (0) | 2018.05.27 |