210319 탑버튼

 

화면 top 부분부터 어느 부분까지는 보이지 않게 되어 있다가 스크롤 다운해서 지정한 위치에 가면 보이도록

 

HTML

<div id="q_menu">
	<div id='i_chat' class='iq_div'></div>
	<div id='i_top' class='iq_div'></div>
	<div id='i_bottom' class='iq_div'></div>
</div>

 

CSS 위치 고정

#q_menu {
display:none;
position: fixed;top:85%;
-webkit-transform: translateY(-85%);
-ms-transform: translateY(-85%);
transform: translateY(-85%);
right:calc(50% - 700px);
}

 

JS1 스크롤 다운 위치에 따라 보여주기, 숨기기

$(window).scroll(function() {	  
	if($(this).scrollTop() > 900) {
		$("#q_menu").fadeIn('fast');
	}
	else {
		$("#q_menu").fadeOut('fast');
	}
});

 

JS2 top 버튼 클릭시 맨 위로, bottom 버튼 클릭시 맨 아래로

아래 내용에서 #ft_wrap 은 footer div의 id

	 $('#i_top').click(function() {
		$('html, body').animate({
			scrollTop : 0
			//scrollTop: $('html, body').height()
		}, 500);
		return false;
	 });
	 $('#i_bottom').click(function() {
		$('html').animate({scrollTop : ($('#ft_wrap').offset().top)}, 600);
	 });

 

끝