"맨위로"버튼과 부드러운 스크롤 이동

jQuery를 이용한 "맨위로"버튼과 스크롤 이동을 부드럽게 하는 방법입니다.

1. 버튼을 클릭하면 화면 상단으로 부드럽게 이동합니다.
2. 버튼은 스크롤이 "offset = 220"이상으로 이동되면 나타나고 이하로 이동되면 없어집니다.
3. 버튼은 "duration = 500"의 속도로 나타나고 없어집니다.


css .back_to_top{position:fixed;bottom:0;left:50%;margin-left:380px;text-decoration:none;color:#000000;background-color:rgba(0, 0, 0, 0.80);font-size:12px;padding:1em;display:none;} .back_to_top:hover{background-color:rgba(0, 0, 0, 0.50);color:#000;}
html <a href="#" class="back_to_top">Back to Top</a>
javascript jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back_to_top').fadeIn(duration); } else { jQuery('.back_to_top').fadeOut(duration); } }); jQuery('.back_to_top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) });
참고 : Using jQuery to add a dynamic “Back To Top” floating button with smooth scroll