블로그 화면을 위아래로 스크롤해도
카테고리와 위아래가기와 중간가기 아이콘은
항상 그 자리에 있게 만들어봤습니다.
여기저기 정신없이 뒤져 필요한 소스를 얻어
수많은 시행착오를 한 끝에 지금의 화면으로 정착하였습니다.
결과는 간단했으나
그간의 마음고생이라니....
소스 공개합니다.
아래 소스를
</body> 바로 위에 넣으세요>
<!-- 위치선정하기 width를 설정하지 않으면 문제가 발생할 수 있으니 꼭 설정할 것.
위치변경은 bottom과 right을 각각 top이나 left로 --->
<div width=200px style="display:scroll;position:fixed;width:120px; bottom:5px;right:5px;" >
<!-- 카테고리 모듈 -->
<div id="category">
<!--
-->
</div>
<br>
<!-- 스크롤바 제어메뉴 시작 --->
<script language="JavaScript">
<!--
function goTop(){
window.scrollTo(0,0); //맨위로}
function goMiddle(){
window.scrollTo(0,2500); //중간쯤 위치를 입맛에 맞게 조절하세요.}
function goBottom(){
var scr = document.body.scrollHeight; //페이지의 길이를 체크
window.scrollTo(0,scr); //맨아래로}
//-->
</script>
<div id='scrollmenu' name="scrolltop">
<div align="center"><a href="javascript://" class="top" onclick="goTop(); return false;">
<img src="./images/up.png" border=0 alt="위로가기"></a></div>
<div align="center"><a href="javascript://" class="center"onclick="goMiddle(); return false;">
<img src="./images/middle.png" border=0 alt="중간가기"></a></div>
<div align="center"><a href="javascript://" class="bottom" onclick="goBottom(); return false;">
<img src="./images/down.png" border=0 alt="아래가기"></div>
</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>
<!--- 스크롤바 제어메뉴 끝 -->
</div>
해상도는
1680 x 1050에 최적화 되어있으며
17이치 1280 x 800에서도 잘 적용됩니다.
800 x 600에서는 높이에 겹침문제가 발생합니다.
소스자료 출처
http://suldo.com/224
