ATOM FEEDRSS FEEDprofile

jquery animate 효과를 이용한 페이지 맨위로 이동하기 Web/Blog

아래와 같은 코드의 추가로 페이지 맨위로 가는 스크롤 탑 효과를 낼 수 있다.

$( 'html, body' ).animate( { scrollTop: 0 }, 0 );

부드러운 스크롤링 효과를 내고 싶을땐 slow를 추가해준다.

$( 'html, body' ).animate( { scrollTop: 0 }, 'slow' );

스크롤바가 상단에서 일정부분 떨어진 부분에서 멈추게 하고 싶을때

$( 'html, body' ).animate( { scrollTop: 원하는 px수치 }, 'slow' );

jquery에 적용할 전체 소스

$(document).ready(function() {

$('.backtotop').click(function(){

$('html, body').animate({scrollTop:0}, 'slow');

;});

;});

장점
  • 예전에도 자바스크립트로 스스륵 올라가는 효과는 많았지만, IE에서는 되고 파폭에선 안되거나 body onload등을 써서 다른 소스와 충돌나고 랙걸리고..배보다 배꼽이 더 컸던것에 비해 가볍고 크로스브라우징(IE 6,7,8, 크롬, 파폭, 사파리 확인)이 되며 다른 소스와 충돌날 일도 없다.
  • 보통 anchor 를 이용해서 top으로 가는 소스의 경우 한번 클릭하고 나면 주소창에 # 나 #top 등이 따라붙어서 찜찜했던거 해결
  • 별도의 anchor점(a name="top") 지정없이 간단히 원하는곳에 스크롤이 멈추게 할수있다.

*thoth 나 xe, textyle의 경우 jquery가 기본으로 탑재되있어 두줄만 추가하면 되니 좋은듯
단점
  • 단점: 알려주세요 !
Share
이 글과 관련된 글
  1. [2011/10/23] jquery로 ajax호출시 로딩이미지 보여주기 by 날파리 (1164)
  2. [2011/02/09] jquery ui menu() by 파란하늘 (1913)
  3. [2010/09/02] ajax() 메소드의 context 속성 by 파란하늘 (813)
  4. [2010/09/02] data() 메소드의 활용 by 파란하늘 (806)
  5. [2010/08/26] jQuery Plugin by 고집불통 때쟁이 (1184)
Tag :

Leave Comments

top
T-NAVI