본문 바로가기

티스토리

[티스토리팁]페이지가 길때 나타나는 고정된 TOP,MIDDLE,BOTTOM 버튼 넣기

반응형


할라당~안녕하세요~!
이팁은 기존의 팁들을 모아서 짬뽕시킨 팁입니다...
블로그를 이용하다 보면 페이지가 짧은 글도 있고...
하루동일 스크롤바를 긁어 내려야 하는 글들도 많습니다...
그리하~~~여~~~!! 만들게 된 것이지요.....
지금 바로 오른쪽에 보이는 그놈입니다..


제목에도 나와 있듯이 페이지가 길때만 해당 버튼 메뉴들이 나타나고
스크롤바를 따라 다닌답니다...ㅎㅎ
간단하게 적용할수 있도록 쉽게 설명 하겠습니다욧~!
먼저 첫번째 소스인 스타일시트를 관리자 모드 스킨>HTML/CSS편집에서 style.css 암때나...
body {어쩌고~}  밑에 정도? 에 넣어줍니다..

/*-- (고정 css) --*/
#scrollmenu {
position: fixed;
right:0;
bottom: 0;
height: 250px; //이걸 조절하면 위치가 바뀌어요.
width: 32px; //이건 아이콘의 크기에 따라...
text-decoration: none;
}

이제 두번째 소스인 실 적용 스크립트 및 HTML소스 입니다.
skin.html 에서 맨아래로 내린다음 </body> 바로 위에 넣어주시면 됩니다~!

그리고 소스중에 이미지는 알아서 하셔야 겠죠잉~! 제가 쓰고 있는거 그대로 쓰셔도 무방합니다요~!

<!-- 스크롤바 제어메뉴 시작 --->
<script language="JavaScript">
<!--
function goTop(){
window.scrollTo(0,0); //맨위로
}
function goMiddle(){
window.scrollTo(0,4000); //중간쯤 위치를 입맛에 맞게 조절하세요.
}
function goBottom(){
var scr = document.body.scrollHeight; //페이지의 길이를 체크
window.scrollTo(0,scr); //맨아래로
}
//-->
</script>
<div id='scrollmenu' name="scrolltop">
<p align="center"><a href="javascript://" class="top" onclick="goTop(); return false;"><img src="./images/stop.png" border="0" title="맨꼭대기로"></a></p>
<p align="center"><a href="javascript://" class="center"onclick="goMiddle(); return false;"><img src="./images/scenter.png" border="0" title="긴 페이지는 중간쯤으로 짧은 페이지는 맨바닥으로"></a></p>
<p align="center"><a href="javascript://" class="bottom" onclick="goBottom(); return false;"><img src="./images/sbottom.png" border="0" title="맨바닥으로"></a></p>
</div>
<script language="JavaScript">
<!--
var hightop = document.body.clientHeight;
if (hightop <= 2000){ // 페이지 길이가 2000px 이하일때는 메뉴숨김
document.getElementById('scrollmenu').style.display = "none";
}
else if (hightop > 3000){ // 페이지 길이가 3000px 이상일때는 메뉴보임
document.getElementById('scrollmenu').style.display = "block";
}
//-->
</script>
<!--- 스크롤바 제어메뉴 끝 -->


이상입니다~! 쉽죠???
* 이미지는 옆에 보이는 이미지를 저장하셔서 쓰시면 됩니다~
각각 되어 있어요~ 총 3개^^
잘 안되시거나 어렵다 하시는 분은 댓글 달아 주시면 바로 알려드리도록
하겠습니다.
술도였습니다~! 휘리릭~
반응형