디자인천일공책

Html＆JQuery 스크롤(scroll) 화면 맨위로, 맨아래로

페이지 정보

작성자 디자인천일 작성일Date: 2025-03-29 00:30 조회view: 6

본문

스크롤(scroll) 화면 맨위로, 맨아래로

css

#top_btn {display:block;position:fixed;right:20px;bottom:40px;width:40px;height:40px;text-align:center;line-height:38px;background:#fff;border:solid 1px #444;z-index:99;opacity:0;
transition: all .3s ease-out;
}
#top_btn:after {content:'\e944';display:block;position:absolute;left:0;top:0;width:100%;font-family:'xeicon';font-size:20px;line-height:40px;text-align:center;}
#top_btn:hover {color:#fff;background:#222;border:solid 1px #444;}
#top_btn.sticky {opacity:1 !important;}

#bottom_btn {display:block;position:fixed;right:20px;bottom:80px;width:40px;height:40px;text-align:center;line-height:38px;background:#fff;border:solid 1px #444;z-index:99;opacity:0;
transition: all .3s ease-out;
}
#bottom_btn:after {content:'\e941';display:block;position:absolute;left:0;top:0;width:100%;font-family:'xeicon';font-size:20px;line-height:40px;text-align:center;}
#bottom_btn:hover {color:#fff;background:#222;border:solid 1px #444;}
#bottom_btn.sticky {opacity:1 !important;}

html

<button type="button" id="top_btn"><span class="sound_only">상단으로</span></button>
<button type="button" id="bottom_btn"><span class="sound_only">하단으로</span></button>

jQuery/Javascript

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

	//button bottom
	$('#bottom_btn').click(function(){
		var bottom = document.body.scrollHeight;
		window.scrollTo({top:bottom, left:0, behavior:'smooth'})
	});


/* scroll function */
$(window).scroll(function() {
	if ($(window).scrollTop() > 100) {
		$('#top_btn').addClass('sticky');
		$('#bottom_btn').addClass('sticky');
	} else {
		$('#top_btn').removeClass('sticky');
		$('#bottom_btn').removeClass('sticky');
	}
});