블로그 이미지

calendar

      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29      
대구푸드

2011/05/05 08:02 티스토리


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


제목에도 나와 있듯이 페이지가 길때만 해당 버튼 메뉴들이 나타나고
스크롤바를 따라 다닌답니다...ㅎㅎ
간단하게 적용할수 있도록 쉽게 설명 하겠습니다욧~!
먼저 첫번째 소스인 스타일시트를 관리자 모드 스킨>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>
<!--- 스크롤바 제어메뉴 끝 -->


이상입니다~! 쉽죠??? 잘 안되시거나 어렵다 하시는 분은 댓글 달아 주시면 바로 알려드리도록
하겠습니다.
술도였습니다~! 휘리릭~
저작자 표시
posted by 술도

댓글을 달아 주세요

  1. Favicon of http://nnkent11.tistory.com BlogIcon NNK 2011/08/19 05:18  Addr Edit/Del Reply

    완전 잘배워 갑니다~ ㅎㅎ

  2. 라핀 2011/08/24 19:13  Addr Edit/Del Reply

    좋은 팁 감사합니다^^

  3. 유용하게 활용하였습니다.
    정말 감사합니다...^^

  4. 감사합니다 ㅎㅎ 깔끔해서 좋네요.

prev 1 ... 11 12 13 14 15 16 17 18 19 ... 203 next