[해피CGI][cgimall]scrollTop()을 이용한 페이지 상단으로 부드럽게 이동하기

.scrollTop() 을 이용하여 스크롤시 지정한 값까지 이동하면 상단으로란 버튼이 노출되고 클릭시
부드럽게 상단으로 이동하며 버튼이 사라지는 자료입니다.

버튼

.scroll {position: fixed; left: 50%;bottom: 50px;display: none;}

버튼을 하단 고정으로잡고 숨깁니다.


$( window ).scroll( function() {
   if($(this).scrollTop() > 400 ) {
  $('.scroll').fadeIn();
   }else{
  $( '.scroll' ).fadeOut();
   }
 } );

지정한 값만큼 스크롤시 버튼이 보이고 아니면 사라집니다.


$('.scroll').click(function(){
   $('html, body').animate({ scrollTop : 0},400);
   return false;
 });

스크롤 버튼클릭시 .animate를 이용하여 상단으로 이동을합니다.
자세한 상세화면은 데모보기 또는 자료를 다운로드를 하여 확인하시면 됩니다.