콘텐츠로 건너뛰기

제이쿼리 탑버튼

제이쿼리 탑버튼

블로그&인터넷/기타

2016-12-24 05:44:19


여기 저기서 이런 저런 방법들을 모아 짜집기해서 만들어 본 탑 버튼 소스입니다. css편집이나 HTML에 태그 추가등의 작업 없이 <head>…</head> 사이나 </body> 위에 스크립트 소스만 추가하면 되는 방법입니다.

많은 스킨에 적용해보진 않았지만 대부분의 스킨에서 잘 작동할것 같습니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script src=“http://t1.daumcdn.net/tistory_admin/lib/jquery-2.1.4.min.js”></script>
 
<script type=“text/javascript”>
$(document).ready(function() {
    $(“body”).append(“<a class=’return_top’ href=’#’>▲ TOP</a>”);
    var top = $(“.return_top”);
    $(window).scroll(function () {
        if ($(this).scrollTop() > 120) {
            top.slideDown();
        }else {
            top.slideUp();        
        }
    });
    top.click(function () {
        $(‘body,html’).animate({ scrollTop:},900);return false;})
        .css({
        “right”:“15px”,
        “bottom”:“15px”,
        “padding”:“7px”,
        “color”:“#fff”,
        “background”:“#6799ff”,
        “border-radius”:“5px”,
        “position”:“fixed”,
        “z-index”:“9999” })
        .hide()
        .hover(function() { $(this).css({“background”:“#f15f5f”}) },
                     function() { $(this).css({“background”:“#6799ff”}) }
                    );
});    
</script>
cs

이미 헤더부분에 jquery가 이미 존재한다면 1번 라인 <script src=”http://t1.daumcdn.net/tistory_admin/lib/jquery-2.1.4.min.js”></script>은 불필요 합니다. 특별히 추가할 부분 없이 HTML 편집에서 </body> 위에 추가해주시면 바로 작동 합니다.

대충 설명을 드리자면

if ($(this).scrollTop() > 120) { : 120 만큼 스크롤이 내려오면 작동 합니다.      

$(‘body,html’).animate({ scrollTop:},900);return false;})  : 900은 클릭했을때 최상단으로 스르륵 스크롤 올라가는 속도입니다.

.css({“right”:“15px” … “z-index”:“9999” }) : 버튼의 속성으로 배경색등 적장히 조절하시면 됩니다.             

.hover(function() { $(this).css({“background”:“#f15f5f”}) }, : #f15f5f는 마우스가 버튼위 올라왔을때 배경색상입니다.

             function() { $(this).css({“background”:“#6799ff”}) } : 마우스가 벗어 났을때 색상입니다. 위 .css 부분의 배경색상과 같이 맞춘색상입니다.                                       


일정량 스크롤을 내리면 브라우저 오른쪽 하단에서 슬라이드업 됩니다.

#티스토리 #블로그 #jquery #탑버튼 #제이쿼리

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다