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

페이지의 밑으로 내려가면 웹브라우저 아래 중간에 Top이라는 링크가 생기고, 그 링크를 클릭하면 맨 위로 천천히 올라갑니다. 예제 스크립트의 의미는 다음과 같습니다.
2 min read

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;
});
  • 클릭했을 때 부드럽게 올라가도록 애니메이션 효과를 줍니다.

You may like these posts

  • .attr() .attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가합니다.   기본형 1 .attr( attributeName ) 선택한 요소의 속성의 값을 가져옵니다. 예를 들어 $( 'div' ).attr( 'class' ); 는…
  • .addClass() .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다.   기본형 .addClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다.   $( 'h1' ).addClass( 'abc' ); 띄어쓰기로 구…
  • .animate .animate()는 애니메이션 효과를 만듭니다.   기본형 .animate( properties [, duration ] [, easing ] [, complete ] )   properties 애니메이션 효과를 줄 속성을 정합니다. 가능한 속성은 다음과 같습니다…
  • .after() .after()는 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있습니다.   기본형 .after( content [, content ] ) 예를 들어 $( 'h1' ).after( '<p>Hello</p>' ); …
  • .appendTo() .appendTo()는 선택한 요소를 다른 요소 안에 넣습니다.   기본형 .appendTo( target ) 예를 들어 $( 'p' ).appendTo( 'blockquote' ); 는 <p> 요소를 <blockquote> 요소 안으로 …
  • .append() .append()는 선택한 요소의 내용의 끝에 콘텐트를 추가합니다.   기본형 .append( content [, content ] )   예를 들어 <p>Lorem Ipsum Dolor</p> 가 있을 때 $( 'p' ).appen…

Post a Comment