본문 바로가기

티스토리

[티스토리 팁]페이지가 길때만 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 보다 길때 보여지도록 지정해
놓았습니다.

간단하죠?? 모르는 부분이 있으면 댓글 달아주시면 알려드릴게요^^
반응형