반응형
얼마전에 CDMANI 님 블로그에 간적이 있습니다. 더블클릭으로 블로그를 더 편하게라는 포스팅을 보고 저도 해봤는데 이게 은근히 편하더군요~ 그래서 여러분에게 소개 할까 합니다.

사실 별로 어렵지 않은 팁이라서, 여러분도 쉽게 적용해서 유용하게 사용할수 있습니다.
자 먼저 어떻게 작동하는지에 대해서 보여드리겠습니다.

지금 바로 제 블로그에 빈공간에 마우스로 더블 클릭을 해보시고, 다시 더블 클릭을 해보세요!

해보셨나요!
해보신분은 아시겠지만, 아무곳이나 한번 더블 클릭하면 맨 하단으로 내려가고, 또 한번 더블 클릭하면 맨 상단으로 올라옵니다. 즉 한번에 맨 상단으로 또 다시 한번 하면 맨 하단으로 자동으로 이동 된다는겁니다.

소스는 다음과 같습니다.

<script language='javascript'>
    toggle=0; 
    document.ondblclick = function(event)
    {   
        if(window.event)
        {
            EventStatus = window.event.srcElement.tagName;
        }
        else
        {
            EventStatus = event.target.tagName;  
        }

        if(EventStatus!='INPUT'&&EventStatus!='TEXTAREA')
        {
            if(toggle==0)
            {
                var sc=99999; toggle=1;
            }
            else
            {
                var sc=0; toggle=0;
            }
            window.scrollTo(0,sc)
        }
    }
</script>

위의 소스를 블로그의 HTML/CSS 에서 <HEAD>와 </HEAD> 사이에 넣어주면 됩니다.

위의 소스는 IE6, IE7, FIREFOX 3.0 에서 정상 작동중이라고 CDMANI님께서 말씀 해주셨습니다. ㅎㅎ

대부분의 블로그에서는 TOP으로 이동하는 아이콘이 스크롤바를 따라 다닙니다. 그건 마우스로 해당 부분을 클릭 해야지만, 이 소스는 어떤곳이든 아무곳에서나 더블 클릭하면 바로 상단으로 이동하고 확인후에 다시 더블 클릭하면 맨 하단으로 이동 하기 때문에, 유용함이 더 합니다.

그리고 방문자도 알아볼수 있게 저처럼 댓글 창 밑에다가 더블 클릭시 맨 상단으로 이동합니다라고 문구를 써주시는것도 좋습니다.^^/

2009년 12월 18일 추가
위의 소스 내용중에 두번째 줄인 toggle=0;  의 0을 1로 변경하면 처음 더블클릭시 작동되는 부분이 상단부터 이동하게 됩니다...

위의 소스대로만 적용하시면 처음 더블클릭시 하단부터 이동하게 됩니다....

반응형
홈으로
공감
Post by : 재아