본문 바로가기

#NoWarInUkraine
티스토리

[티스토리 팁]페이지가 길때만 TOP버튼이 생기게 하기

반응형


이번 팁은 기존 고정된 광고 달기+화면 넓이에 따라 HIDE/SHOW 를 활용한 팁입니다.

우선 코드는 아래와 같습니다.

1, TOP이미지가 보여지는 부분

<div id='scrolltop' name="scrolltop">
<a href="#" class="top" onclick="window.scrollTo(0,0); return false;"><img src="./images/top.png" border="0" title="맨위로"></a>
</div>
2, 화면길이에 따라 HIDE&SHOW를 해주는 스크립트

<script language="JavaScript">
<!--
var hightop = document.body.clientHeight;
if (hightop <= 2000){
document.getElementById('scrolltop').style.display = "none";
}
else if (hightop > 3000){
document.getElementById('scrolltop').style.display = "block";
}
//-->
</script>

적용 방법은 먼저 TOP이미지로 쓸 이미지를 티스토리 스킨편집에 파일업로드를 통해
업로드 한후 적용하고 하는 위치에 1번 코드와 2번 코드를 같이 넣습니다.

그리고 2번코드에서 빨간색 부분을 자신이 나타내고자 하는 범위를 지정합니다.
저는 현재 2000px이하 일때는 숨기고 ,3000px 보다 길때 보여지도록 지정해
놓았습니다.

간단하죠?? 모르는 부분이 있으면 댓글 달아주시면 알려드릴게요^^
반응형
  • Favicon of http://kclover.tistory.com/ BlogIcon 커피클로버 2011.05.13 11:53

    안녕하세요~top버튼 생성에 관해서 질문좀 드릴께요^^
    버튼 이미지가 2개가 있는데 마우스를 갖다 대기 전이랑 후 이렇게요 2개를 일단 업로드 한후 위에 올려주신 코드를 적용시키려 하는데 skin.html 이랑 style.css 둘중 어느 위치에 적용시켜야하는지 알려주시면 감사드릴께요~ 두개다 적용시켜도 잘 안대서요 ㅎㅎ

    • Favicon of http://suldo.com BlogIcon 술도 2011.05.13 14:14

      아 제가 깜빡하고 소스를 완전하게 다 쓰지 않았는데요..
      http://suldo.com/190 이걸 참고하셔야 합니다. 기존이 되는 소스입니다.