맨 위로 부드럽게 스크롤 이동하는 방법

scrollTop() 맨 위로 스크롤 이동하는 방법

jQuery의 scrollTop()을 이용하면 맨 위로 부드럽게 올라가는 효과를 쉽게 만들 수 있습니다.

밑으로 내려가면 웹브라우저 아래 중간에 Top이라는 링크가 생기고,그 링크를 클릭하면 맨 위로 천천히 올라갑니다.

 

<div class="Content">
  <a href="#" class="top">Top</a>
</div>

div {
  width: 80%;
  margin: 0 auto;
  padding: 80px 15px;
}
a.top {
  position: fixed;
  left: 50%;
  bottom: 50px;
  font-size: 32px;
  display: none;
}

$( document ).ready( function() {
  $( window ).scroll( function() {
    if ( $( this ).scrollTop() > 200 ) {
      $( '.top' ).fadeIn();
    } else {
      $( '.top' ).fadeOut();
    }
  });
  $( '.top' ).click( function() {
    $( 'html, body' ).animate( { scrollTop : 0 }, 1000 );
    return false;
  });
});

 

스크립트의 의미

<a href="#" class="top">Top</a>

• HTML에 링크 요소를 만듭니다.

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

• 스크롤해도 위치가 변하지 않도록 만들고, 적당히 위치를 잡은 후 보이지 않게 합니다.

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

• 어느 정도 스크롤하여 밑으로 내려갔을 때 링크가 보이게 합니다.

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

• 클릭했을 때 부드럽게 올라가도록 애니메이션 효과를 줍니다.