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;
}
#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>
<!--- 스크롤바 제어메뉴 끝 -->
<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>
<!--- 스크롤바 제어메뉴 끝 -->
이상입니다~! 쉽죠??? 잘 안되시거나 어렵다 하시는 분은 댓글 달아 주시면 바로 알려드리도록
하겠습니다.
술도였습니다~! 휘리릭~
'티스토리' 카테고리의 다른 글
| [티스토리팁]페이지가 길때 나타나는 고정된 TOP,MIDDLE,BOTTOM 버튼 넣기 (4) | 2011/05/05 |
|---|---|
| [티스토리팁]티스토리_다음 뷰ON 페이지하단에 고정시키기~! (4) | 2011/04/22 |
| [티스토리 팁]페이지가 길때만 TOP버튼이 생기게 하기 (2) | 2011/02/02 |
| [티스토리 팁]티스토리에 왼쪽 또는 오른쪽에 고정된 광고 달기+브라우저(페이지) 크기에 따른 노출 유무 적용 (3) | 2011/01/29 |
TAG
tip,
Tistory,
tistory tip,
고정배너,
스크롤,
스크롤 고정,
아래로,
위로,
중간,
티스토리,
티스토리 정보,
티스토리팁,
페이지 길때만,
페이지 스크롤







댓글을 달아 주세요
완전 잘배워 갑니다~ ㅎㅎ
좋은 팁 감사합니다^^
유용하게 활용하였습니다.
정말 감사합니다...^^
감사합니다 ㅎㅎ 깔끔해서 좋네요.