Blog Content

    티스토리 뷰

    jQuery 탑 버튼


    jQuery 퀵 버튼





    01. CSS


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {margin:0; padding:0; font-size:14px;}
    a, a:active {color:#333; text-decoration:none;}
    ul li {list-style:none;}
    header {height:100px; background:orchid}
    section {height:1500px; background:burlywood}
    footer {height:100px; background:darkcyan}
    body { position:relative; }
    .quick {position:fixed; bottom:20px; right:20px; display:none;}
    .quick.on {display:block; }
    .quick a {display:block; padding:20px; border:1px solid #333; background:aquamarine; font-weight:bold;}





    02. HTML


    1
    2
    3
    4
    <header>header</header>
    <section>section</section>
    <footer>footer</footer>
    <div class="quick"><a href="#none">Top</a></div>




    03. jQuery


    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
    var num = 20
    var ui_window = $(document).height() - $(window).height() - $("footer").height() 
    // document의 height 빼기 window의 height 값 을 뺀 footer의 height 값 을 변수에 저장
     
    var btn = $(".quick")
    $(document).scroll(function(){
        var scroll_height = $(document).scrollTop(); // 스크롤높이값 구하기 
                        
        if (num <= scroll_height){ // num 보다 scroll_height 가 크거나 같을때  
            btn.addClass("on"// 퀵메뉴가 보이게 
        }else
            btn.removeClass("on"// 그렇지 않으면 안보이게 
        }
        if ( $(window).scrollTop() >= ui_window) { // window 스크롤Top 값이 ui_window 값보다 크거나 같을때 
            var move = $(window).scrollTop() - ui_window + 20  // window 스크롤Top 빼기 ui_window(footer의 구한 값)을 빼준 변수 
            btn.css({
            bottom: move + "px"
            });
        } else {
            btn.css({
            bottom: 20 + "px"
            });
        }
    });
     
    btn.click(function(){
        $("html, body").animate({scrollTop : 0}, 300); // 버튼 클릭 시 상단으로 이동 
    });




    jQuery Top으로 올라가기 버튼 


    CSS는 수정해서 사용


    '개발연습막쓰기 > 개발연습 막쓰기' 카테고리의 다른 글

    jQuery 스틱 플러그인  (0) 2017.11.06
    비쥬얼스튜디오코드  (0) 2017.09.11
    scrollTop 이벤트  (0) 2017.07.18
    드롭 ANIMATE 텝  (0) 2017.07.17
    텝 메뉴  (0) 2017.07.17

    Comments