jQuery 공작소 : 화면스크롤 애니메이션

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

화면 스크롤을 animate 메소드로 제어해 보는 예제입니다.
애니메이션 효과로 부드럽게 스크롤을 제어할 수 있습니다.

예제 1
현재 위치에서 특정 위치로 스크롤
보기
아래 버튼을 누르면 화면이 스크롤 됩니다.

소스
아래 버튼을 누르면 화면이 스크롤 됩니다.<br><br>
<button type="button" onclick="$('html, body').stop().animate( { scrollTop : '100' } ); ">절대값 스크롤 ( 100px )</button>
<button type="button" onclick="$('html, body').stop().animate( { scrollTop : 300 } ); ">절대값 스크롤 ( 300px )</button>
jQuery

$( 'html, body' ).stop().animate( { scrollTop : '100' } )  -  위로부터 100px 위치로 스크롤
$( 'html, body' ).stop().animate( { scrollTop : 300 } )  -  위로부터 300px 위치로 스크롤

'100', 300 처럼 문자형태나 숫자형태로 입력할 수 있습니다.

예제 2
현재 위치에서 특정값 만큼 추가된 스크롤 - 아래로 스크롤
보기
아래 버튼을 누르면 화면이 스크롤 됩니다.
연타해 보세요 !

소스
아래 버튼을 누르면 화면이 스크롤 됩니다.<br>연타해 보세요 !<br><br>
<button type="button" onclick="$('html, body').stop().animate( { scrollTop : '+=100' } ); ">상대값 스크롤 ( + 100px )</button>
<button type="button" onclick="$('html, body').stop().animate( { scrollTop : '+=300' } ); ">상대값 스크롤 ( + 300px )</button>
jQuery

$( 'html, body' ).stop().animate( { scrollTop : '+=100' } )

html, body 태그를 대상으로 scrollTop 속성에 +100 만큼의 값을 애니메이션 하면 아래로 스크롤이 됩니다.

예제 3
현재 위치에서 특정값 만큼 스크롤 - 위로 스크롤
보기
아래 버튼을 누르면 화면이 스크롤 됩니다.

소스
아래 버튼을 누르면 화면이 스크롤 됩니다.<br><br>
<button type="button" onclick="$('html, body').stop().animate( { scrollTop : '-=100' } ); ">상대값 스크롤 ( - 100px )</button>
<button type="button" onclick="$('html, body').stop().animate( { scrollTop : '-=300' } ); ">상대값 스크롤 ( - 300px )</button>
jQuery

$( 'html, body' ).stop().animate( { scrollTop : '-=100' } )

- html, body 태그를 대상으로 CSS scrollTop 속성에 -100 만큼의 값을 애니메이션 합니다.
- 이렇게 하면 위로 스크롤 됩니다. ↑↑↑

예제 4
애니메이션 easing 효과가 적용된 스크롤
보기
아래 버튼을 누르면 화면이 스크롤 됩니다.

소스
아래 버튼을 누르면 화면이 스크롤 됩니다.<br><br>
<button type="button" onclick="$('html, body').stop().animate( { scrollTop : '-=300' }, 1000, 'easeOutBack' ); ">위로 easeOutBack 효과 스크롤</button>
<button type="button" onclick="$('html, body').stop().animate( { scrollTop : '-=300' }, 1000, 'easeOutElastic' ); ">위로 easeOutElastic 효과 스크롤</button>
jQuery

$( 'html, body' ).stop().animate( { scrollTop : '100', 1000, 'easeOutBack' } )
1초 동안 easeOutBack 효과를 적용하여 스크롤

$( 'html, body' ).stop().animate( { scrollTop : '100', 1000, 'easeOutElastic' } )
1초 동안 easeOutElastic 효과를 적용하여 스크롤


참고 자료 : easing(이징) 효과 모음

예제 5
화면 제일 위로 스크롤
보기
아래 버튼을 누르면 화면이 스크롤 됩니다.

소스
아래 버튼을 누르면 화면이 스크롤 됩니다.<br><br>
<button type="button" onclick="$('html, body').stop().animate( { scrollTop : 0 } ); ">맨 위로</button>
<button type="button" onclick="$('html, body').stop().animate( { scrollTop : 0 }, 200 ); ">맨 위로 (더 빠르게)</button>
<button type="button" onclick="$('html, body').stop().animate( { scrollTop : 0 }, 2000 ); ">맨 위로 (천천히)</button>
jQuery

$( 'html, body' ).stop().animate( { scrollTop : 0 } )
0 을 입력하면 화면제일위로 스크롤됩니다.

$( 'html, body' ).stop().animate( { scrollTop : 0 }, 시간 )  -  1000분의 1초로 값일 입력합니다.
$( 'html, body' ).stop().animate( { scrollTop : 0 }, 1000 )  -  1초 동안 스크롤
$( 'html, body' ).stop().animate( { scrollTop : 0 }, 100 )  -  0.1초 동안 스크롤

예제 6
특정 요소의 위치로 스크롤하기 - 이미지를 대상으로 예제
보기








소스
<style type="text/css">
    .css_test img {
        margin-bottom : 20px;
    }
    
</style>

<div class="css_test">
    <img src="https://t1.daumcdn.net/cfile/tistory/22743938550B923803" /><br>
    <img src="https://t1.daumcdn.net/cfile/tistory/22723C38550B923D04" /><br>
    <img src="https://t1.daumcdn.net/cfile/tistory/244ED638555ABF4509" /><br>
</div>
<br><br>
<button type="button" onclick="j_test(0)">첫번째 이미지 위치로 이동</button><br>
<button type="button" onclick="j_test(1)">두번째 이미지 위치로 이동</button><br>
<button type="button" onclick="j_test(2)">세번째 이미지 위치로 이동</button><br>

<script type="text/javascript">
    function j_test(n){
        $('html, body').stop().animate({
            scrollTop : $('.css_test img').eq(n).offset().top
        });
    }
</script>
관련 CSS
jQuery

- scrollTop : $( '.css_test  img' ).eq(n).offset().top
- offset 메서드의 top 속성을 이용하여 해당 이미지의 top 위치 값을 알아낸 후 그 위치로 스크롤 합니다.
- 해당 위치로 바로 이동하는 절대값 스크롤 입니다.

$( 'html,  body' ).stop().animate({
        scrollTop : $( '.css_test  img' ).eq(n).offset().top
})

참고 메서드 : .eq() .offset()

예제 7
jQuery
예제는 계속 추가됩니다. ^^