이번 팁은 기존 고정된 광고 달기+화면 넓이에 따라 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 보다 길때 보여지도록 지정해
놓았습니다.

간단하죠?? 모르는 부분이 있으면 댓글 달아주시면 알려드릴게요^^
저작자 표시
신고