jQuery 탑 버튼

jQuery 퀵 버튼

01. CSS

* {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

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

03. jQuery

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는 수정해서 사용