본문 바로가기

Tistory

티스토리 IS BASE 스킨 부드럽게 스크롤되는 Top버튼 만들기




티스토리 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


원본 이미지 출처 : http://www.miwit.com/ 에서 수정되어 배경이 투명한 이미지입니다.