본문 바로가기
html, css, javascript/javascript/jquery

TOP버튼 / 누르면 맨 위로 올라가는 버튼 / scroll top / 스크롤 내리면 나타나는 버튼

by 허그미 2020. 7. 28.
반응형


$(document).ready(function () {
 
   // 1. 특정 위치에서 부터 버튼 나타고, 사라지게..효과는 fade로
    $(window).scroll(function () {
		if ($(this).scrollTop() > 200) {
			$('.go-top').fadeIn(200);
		} else {
			$('.go-top').fadeOut(200);
		}
	});

	// 2. 버튼 클릭하면 원하는 위치로 이동
	$('.go-top').click(function (event) {
		event.preventDefault();
		$('html, body').animate({ scrollTop: 0 }, 300);
	});

});


[1] 스크롤이 200보다 크다면 .go-top버튼을 fadeIn하고, 아니라면 fadeOut시켜라

[2] .go-top버튼을 누르면 "scrollTop:0" 위치로 이동한다 300속도로..



반응형

댓글