맨위로 가는 TOP 아이콘을 블로그의 오른쪽 하단에 넣는 법

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

top아이콘

<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

Designed by JB FACTORY