[Jquery/if else] Scroll 지정 값에서 나타나기(feat. top버튼)

이 전글에 버튼을 누르면 상단으로 올라가는  3가지 방법을 포스팅해서 그에 관련해

스크롤을 조금 내렸을 때 top버튼이 서서히 나오도록 하는 법을 포스팅해보려고 합니다.

 

top버튼이 아니더라도 메뉴바, 광고 등등 다양하게 활용가능합니다. 

 

HTML에 id="scroll-top"이라는 항목이 있다는 전제하에

scroll-top버튼을 꾸며줍니다.

#scroll-top{
	position: fixed;
	display: none;
	bottom: 3vh;
	right: 10%;
	width: 50px;
	height: 50px;
	background: rgba(133,117,60,0.8);
	border-radius: 50%;
	padding: 3px;
	z-index: 99;
}

 

스크롤을 500px만큼 내려오면 버튼을 보이게 합니다.

$(window).scroll(function(){
		if($(this).scrollTop()>500){//500밑으로 내려갔을때 버튼 페이드인
			$("#scroll-top").fadeIn();
		}else{
			$("#scroll-top").fadeOut();
		}
	});

결과확인