|
|
티스토리 IS BASE 스킨 부드럽게 스크롤되는 Top버튼 만들기
마이위트 : http://www.miwit.com, 원본 소스 출처 : http://soyafont.com/
티스토리 IS BASE 스킨 부드럽게 스크롤되는 Top버튼 만들기
티스토리 IS BASE 스킨 부드럽게 스크롤되는 Top버튼 만들기
제트센스 홈페이지에 있는 부드러운 Top버튼을 적용해 보려 했으나 원본제작홈페이지인 마이위트(http://www.miwit.com/)에 문의한 결과 외부에서 사용하려면 티스토리에 맞게 소스를 다시 짜야 한다는 답글을 받고는 거의 반 포기 상태였지만 작은 희망을 가지고 찾던 중 적용이 가능한 스크립트 소스를 찾을 수 있었고 매우 만족스러운 결과를 가져왔습니다.^^
먼저 <head> 와 </head> 사이에 넣어줄 스크립트 소스입니다.. 수정할 부분은 없으니 그대로 넣어주면 됩니다.
<script type="text/javascript">
function go_top(orix,oriy,desx,desy) {
var Timer;
if (document.body.scrollTop == 0) {
var winHeight = document.documentElement.scrollTop;
} else {
var winHeight = document.body.scrollTop;
}
if(Timer) clearTimeout(Timer);
startx = 0;
starty = winHeight;
if(!orix || orix < 0) orix = 0;
if(!oriy || oriy < 0) oriy = 0;
var speed = 7;
if(!desx) desx = 0 + startx;
if(!desy) desy = 0 + starty;
desx += (orix - startx) / speed;
if (desx < 0) desx = 0;
desy += (oriy - starty) / speed;
if (desy < 0) desy = 0;
var posX = Math.ceil(desx);
var posY = Math.ceil(desy);
window.scrollTo(posX, posY);
if((Math.floor(Math.abs(startx - orix)) < 1) && (Math.floor(Math.abs(starty - oriy)) < 1)){
clearTimeout(Timer);
window.scroll(orix,oriy);
}else if(posX != orix || posY != oriy){
Timer = setTimeout("go_top("+orix+","+oriy+","+desx+","+desy+")",15);
}else{
clearTimeout(Timer);
}
}
</script>
굳이 수정할 수도 있는 부분이라면 Top버튼을 눌러 부드럽게 페이지가 올라가는 속도를 수정할 수 있습니다.
var speed = 7;
숫자가 낮을수록 빨리 올라가지만 부드러운 스크롤효과는 없어질 수 있습니다.
그리고 Top버튼 출력 부분인데 개인적으로 조금 수정된 부분이라 2가지 중 골라 쓰시면 되겠습니다.
<span onclick="go_top();" title=Top> 텍스트/이미지<img src=""></span>
span을 A 링크 형태로 바꿔 사용해도 됩니다.
아래는 수정된 소스인데 Top버튼 위치를 마음대로 하려면 아래 소스를 넣어주면 됩니다.
<div style="display:scroll;position:fixed;bottom:5px;right:5px;">
bottom:5px; : bottom은 top과 2가지로 기본적인 위치를 잡아주고 px은 웹페이지가 보이는 화면 하단 또는 상단에서 5px만큼 멀리 위치시키는 것입니다.
right:5px; : right는 left와 2가지로 기본적인 위치를 잡아주고 px은 웹페이지에서 오른쪽 또는 왼쪽에서 5px만큼 멀리 위치시키는 것입니다.
<a onclick="go_top();" title=Top> 텍스트/이미지<img src=""></a>
</div>
티스토리 IS BASE 스킨 부드럽게 스크롤되는 Top버튼 만들기
scroll_top2.txt
Top_1_2.zip
