티스토리)맨위로/맨아래로 버튼 넣기
■ 이미지 다운로드:
위로 버튼은 top.png, 아래로 버튼은 foot.png등 자기가 알아보기 편한 이름으로 저장하고, 스킨 에디터에서 업로드하자.
일부 스킨에 따라 주루룩 밀려올라가는 애니메이션이 적용된 방법은 적용이 안 될 수 있어서 이 방법을 이용.
아래는 소스. HTML 편집(skin.html)에서 <body></body> 사이에 넣어주도록 하자.
<!-- Top button Start -->
<script type="text/javascript">
$(function(){
$("#gotop").hide();
$(window).scroll(function(){
if($(this).scrollTop() > 50){$("#gotop").fadeIn();}
else{$("#gotop").fadeOut();}
});
});
</script>
<a href="#" id="gotop" style="display:none;position:fixed;bottom:5px;right:55px;z-index:99999999" title="Top"><img src="./images/top.png" border="0"/></a>
<!-- Top button End -->
<!-- Foot button Start -->
<script type="text/javascript">
$(function(){
$("#gofoot").hide();
$(window).scroll(function(){
if($(this).scrollTop() > 50){$("#gofoot").fadeIn();}
else{$("#gofoot").fadeOut();}
});
});
</script>
<a href="#foot" id="gofoot" style="display:none;position:fixed;bottom:5px;right:12px;z-index:99999999" title="Top"><img src="./images/foot.png" border="0"/></a>
<!-- Foot button End -->
핑크색으로 표시된 부분을 자기에게 맞게 수정하고, 스킨에 따라서는 #foot/#footer 등으로 쓰이는 경우가 있으니 확인하도록 하자. 필요없다면 적당히 위치 등을 바꿔도 무관.
'Web.World > Trivia' 카테고리의 다른 글
| 제네릭, 바이오시밀러, 바이오베터 (0) | 2017.01.24 |
|---|---|
| 티스토리)블로그에 로딩바 넣기(pace 이용) (0) | 2017.01.23 |
| 전국 병원 검색 (0) | 2017.01.20 |