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

화면 스크롤시 특정 높이에서 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를 조절해 화면 이동 효과 등을 자신에게 만족스럽게 변경해 사용하면 된다.

본문에 대해 문의가 있으신 분은 post@wallel.com로 이메일 보내주세요.
본문 외에 추가 문의 사항은 문의하기를 통해주시기 바랍니다.