scroll 상단으로 > 기술자료

• 목록

<script src="//code.jquery.com/jquery-1.12.4.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.1.1/css/all.css" crossorigin="anonymous">
<style>
#top_btn {position:fixed;bottom:20px;right:20px;width:66px;height:66px;line-height:46px;border:0px solid #333;color:#ffffff;text-align:center;font-size:18px; line-height:20px; z-index:90;background:rgba(58,57,57,1)}
#top_btn:hover{border-color:#3059c7;background:#3059c7;color:#fff}
#top_btn .fa-angle-up { font-size:27px; padding-top:10px; line-height:0px; }
.sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}
</style>
<button type="button" id="top_btn"><i class="fas fa-angle-up" aria-hidden="true"></i><br>TOP<span class="sound_only">상단으로</span></button>
<script>

$(function() {
    $("#top_btn").on("click", function() {
        $("html, body").animate({scrollTop:0}, '500');
        return false;
    });
});
</script>