[jQuery] fadeIn, fadeOut 되는 위로가기 버튼

2016-07-18

JavaScript

김 태영

화면 스크롤시 특정 높이에서 Scroll to Top 버튼이 fade In 되는 스크립트이다.

HTML

<div class="scrollUp" onclick="javascript:scrollUp();"><i class="fa fa-angle-up" aria-hidden="true"></i></div>

<i class="fa fa-angle-up" aria-hidden="true"></i>는 Font Awesome이다. 원하는 아이콘 또는 텍스트를 사용하면 된다.

CSS

.scrollUp { display: none; position: fixed; right: 10%; bottom: 80px; padding: 10px 11px; font-size: 13px; line-height: 100%; text-align: center; color: #fff; background-color: #222; border-radius: 3px; z-index: 10000; cursor: pointer;
	-webkit-transition: background-color 0.2s;
	     -o-transition: background-color 0.2s;
	        transition: background-color 0.2s;
}
.scrollUp:hover { background-color: #555; }

버튼의 크기는 padding 값과 font-size 를 입맛대로 조절하면 된다.

SCRIPT

var scrollUpDelay = 1;
var scrollUpSpeed = 30;
function scrollUp()
{
	if(document.body.scrollTop<1)
	{
		return;
	}
	document.body.scrollTop=document.body.scrollTop-scrollUpSpeed;
	setTimeout('scrollUp()',scrollUpDelay);
}

jQuery(document).ready(function() {
	jQuery(window).scroll(function() {
		if(jQuery(document).scrollTop() > 300) {
			jQuery('.scrollUp').fadeIn();
		} else {
			jQuery('.scrollUp').fadeOut();
		};
	});
});

화면이 300 정도 스크롤 되었을 때 버튼이 fade In 된다. 300보다 숫자가 크면 스크롤이 더 되어야 버튼이 나타난다.
추가로 scrollUpDelay와 scrollUpSpeed를 조절해 화면 이동 효과 등을 자신에게 만족스럽게 변경해 사용하면 된다.

go to top javascript JQuery scroll to top 맨위로