상단, 하단 스크롤 버튼

2016. 8. 8. 17:28웹랩/JavaScript

반응형
$(function(){
    $("#top_btn .scroll-top").on("click",function(e){
        e.preventDefault();
        $("html, body").animate({scrollTop:0}, 100);
        return false;
    });
    $("#top_btn .scroll-center").on("click",function(e){
        e.preventDefault();
        var middle_pos = $("body").offset().top - ( $(window).height() - $("body").outerHeight(true) ) / 2;
        $("html, body").animate({scrollTop:middle_pos}, 100);
        return false;
    });
    $("#top_btn .scroll-bottom").on("click",function(e){
        e.preventDefault();
        var scrollBottom = $("html,body").scrollTop + $("html,body").height();
        $("html, body").animate({scrollTop:$(document).height()}, 300);
        return false;
    });
});
<div id="top_btn"> <div class="top_btn_wp"> <a href="#" title="상단으로" class="scroll-top">상단으로</a> <a href="#" title="중간으로" class="scroll-center">중간으로</a> <a href="#" title="하단으로" class="scroll-bottom">하단으로</a> </div> </div>
#top_btn{position:fixed;bottom:170px;left:-20px;width:100%;z-index:999} #top_btn .top_btn_wp{width:90%;margin:0 auto;position:relative} #top_btn .top_btn_wp a{position:absolute;right:0} #top_btn .top_btn_wp a.scroll-top{top:0} #top_btn .top_btn_wp a.scroll-bottom{top:44px} #top_btn .top_btn_wp a.scroll-center{top:22px}
반응형