[script] top_btn 탑버튼 animation

 

스크롤을 150이상 내렸을 때 탑버튼이 보임.

탑 버튼 클릭 했을 때 제일 윗페이지로 이동하는 애니메이션.

스크롤 이동해도 오른쪽 하단에 계속 있어야하기때문에

position:fixed로 고정시킴.

 

$(window).scroll(function(){
if ($(window).scrollTop() > 150){
	$("#top_btn").addClass("on");
} else {
	$("#top_btn").removeClass("on");
  }
});

$("#top_btn").click(function(){
	$("body,html").animate({scrollTop:0},500);
});

<div id="top_btn"><a href="#">TOP</a></div>

#top_btn{position:fixed; right:50px; bottom:-50%; width:55px; height:55px; border-radius:50%; background:#cda57d; z-index:999; transition:1s all;}
#top_btn.on{bottom:30px;}
#top_btn a{font-family:"Exo"; display:block; text-align:center; line-height:55px; font-size:16px; color:#fff; font-size:bold;}