jquery animate 효과를 이용한 페이지 맨위로 이동하기 Web/Blog
2009.11.13 02:55 Edit
아래와 같은 코드의 추가로 페이지 맨위로 가는 스크롤 탑 효과를 낼 수 있다.
$( '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가 기본으로 탑재되있어 두줄만 추가하면 되니 좋은듯단점
- 단점: 알려주세요 !
이 글과 관련된 글
- [2011/10/23] jquery로 ajax호출시 로딩이미지 보여주기 (1164)
- [2011/02/09] jquery ui menu() (1913)
- [2010/09/02] ajax() 메소드의 context 속성 (813)
- [2010/09/02] data() 메소드의 활용 (806)
- [2010/08/26] jQuery Plugin (1184)





댓글 0