[jQuery] 스크롤 탑버튼
<style type="text/css">
a.btnPageTop{position:fixed;z-index:8000;bottom:15px;right:15px;display:block;width:45px;height:45px;background:#fff;border:1px solid #d6d6d6;text-indent:-9999px;opacity:0;transition:all 0.5s linear;-webkit-transition:all 0.5s linear;}
a.btnPageTop.on{opacity:1;}
a.btnPageTop:before,
a.btnPageTop:after{content:'';display:block;position:absolute;top:20px;right:11px;width:15px;height:3px;background:#005295;transition: all .2s;}
a.btnPageTop:before{right:20px;-webkit-transform:rotate (-45deg);transform:rotate(-45deg);}
a.btnPageTop:after{-webkit-transform:rotate (45deg);transform:rotate(45deg);}
</style>
<a href="#container" class="btnPageTop">맨위로</a>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > $(window).height() / 8){
$('.btnPageTop').addClass('on');
}else{
$('.btnPageTop').removeClass('on');
}
});
});
</script>
a.btnPageTop{position:fixed;z-index:8000;bottom:15px;right:15px;display:block;width:45px;height:45px;background:#fff;border:1px solid #d6d6d6;text-indent:-9999px;opacity:0;transition:all 0.5s linear;-webkit-transition:all 0.5s linear;}
a.btnPageTop.on{opacity:1;}
a.btnPageTop:before,
a.btnPageTop:after{content:'';display:block;position:absolute;top:20px;right:11px;width:15px;height:3px;background:#005295;transition: all .2s;}
a.btnPageTop:before{right:20px;-webkit-transform:rotate (-45deg);transform:rotate(-45deg);}
a.btnPageTop:after{-webkit-transform:rotate (45deg);transform:rotate(45deg);}
</style>
<a href="#container" class="btnPageTop">맨위로</a>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > $(window).height() / 8){
$('.btnPageTop').addClass('on');
}else{
$('.btnPageTop').removeClass('on');
}
});
});
</script>
댓글
댓글 쓰기