상.하단 부드럽게 이동하기
- 퍼블리셔/javascript
- 2010. 6. 19. 06:00
참 사람이 간사합니다^^; 엄청 귀찮아지거든요. 서있으면 앉고싶고, 앉으면 눕고 싶다고 하더니....ㅎㅎㅎㅎ.
위의 이미지나 아니면 다른 이미지라도 우선 스킨 편집창에서 업로드를 해주세요.
위의 하이라이팅 된곳을 보면 알겠지만 이미지주소를 넣은 곳이 있습니다. 원하는 이미지주소 알아서 넣어주시구요.
현재 저도 이걸 적용하고 있는데 , 적용하면서 포스팅할때 코드를 한번더 사용하니 안되는군요. 다른 페이지에서 보시면 아마도 오른쪽에 상하이동 버튼이 보이실겁니다.
이전에 떠블클릭으로 페이지 상하단으로 이동하는걸 포스팅 한적이있습니다. 이건 속도가 엄청 빠르죠^^
상.하단 이동 스크립트 =>http://demun.tistory.com/195
또 마우스를 하단으로 조금만 내리면 위로 버튼이 자동으로 생성되는걸 포스팅 한적이 있습니다.
위로 이동 버튼 달기 => http://demun.tistory.com/1664
이제는 더 간단하고 좋은 이동 버튼을 알려드리겠습니다.
페이지의 중간에 늘 따라다니면서....외관을 해치지도 않고^^; 마우스만 올리면 부드럽게 위로이동하거나 아래로 이동하는 버튼입니다.
적용하는 방법도 무지 쉬우니 한번 적용해보세요.
일단 위로이동하거나 아래로 이동할때 사용할 이미지가 있어야 합니다. 대략 제가 테스트로 3개정도 만들어 봤습니다. 아래것을 사용하거나 다른것을 사용해도 됩니다.
 |
 |
 |
 |
 |
 |
그리고 아래의 코드를 html 편집창의 아무곳이나 붙여넣기 하세요. 제가 생각하기로는 footer 바로 위에 정도가 좋을듯 합니다.
브라우져가 블로그 본문이 읽혀지기도 전에 이런걸 읽는것보다 블로그를 다 읽고 이런것을 읽는것이 좋겠죠^^;
소스는 아래와 같습니다.
<div id="staticbuttons" style="position:absolute;">
<a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0"><img src="./images/top3.png" border="0"></a>
<a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0"><img src="./images/down3.png" border="0"></a>
</div>
<script>
//Page Scroller (aka custom scrollbar)- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
var Hoffset=70 //Enter buttons' offset from right edge of window (adjust depending on images width)
var Voffset=500 //Enter buttons' offset from bottom edge of window (adjust depending on images height)
var thespeed=6 //Enter scroll speed in integer (Advised: 1-3)
var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
var myspeed=0
var ieHoffset_extra=document.all? 15 : 0
var cross_obj=document.all? document.all.staticbuttons : document.getElementById? document.getElementById("staticbuttons") : document.staticbuttons
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function positionit(){
var dsocleft=document.all? iecompattest().scrollLeft : pageXOffset
var dsoctop=document.all? iecompattest().scrollTop : pageYOffset
var window_width=ieNOTopera? iecompattest().clientWidth+ieHoffset_extra : window.innerWidth+ieHoffset_extra
var window_height=ieNOTopera? iecompattest().clientHeight : window.innerHeight
if (document.all||document.getElementById){
cross_obj.style.left=parseInt(dsocleft)+parseInt(window_width)-Hoffset+"px"
cross_obj.style.top=dsoctop+parseInt(window_height)-Voffset+"px"
}else if (document.layers){
cross_obj.left=dsocleft+window_width-Hoffset
cross_obj.top=dsoctop+window_height-Voffset
}
}
function scrollwindow(){
window.scrollBy(0,myspeed)
}
function initializeIT(){
positionit()
if (myspeed!=0){
scrollwindow()
}
}
if (document.all||document.getElementById||document.layers)
setInterval("initializeIT()",20)
</script>
위치에 관련한 곳을 하이라이팅 시켰으니 보시고 원하는 곳에 위치하세요. 저는 중간(500)에 두었습니다. 하이라이팅 맨아래부분에 6 이라고 나온부분이 스크롤의 속도입니다. 대략 3정도로 하면 부드럽게 이동합니다. 전 성질이 급해 좀 빨리 했지요^^;
출처야 뭐 코드에 다 나와있으니 말 안해도 될것이고....
간단하게 이미지 업로드하고 html 에 코드만 붙여넣음으로써 편하게 상.하이동을 할수있는 버튼을 적용해봤습니다.
특히나 1단 스킨이나 본문내용이 긴 블로그의 경우 적용하면 더욱 좋을듯 합니다.