버튼 클릭시 이동 스크롤

http://superkts.com/jquery/@scroll

재 위치에서 특정 위치로 스크롤

보기

아래 버튼을 누르면 화면이 스크롤 됩니다.

 

소스

아래 버튼을 누르면 화면이 스크롤 됩니다.<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>
<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>

예제 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/2469B33354D74FB23B" /><br>
    <img src="https://t1.daumcdn.net/cfile/tistory/21385A4C550B9B3D10" /><br>
    <img src="https://t1.daumcdn.net/cfile/tistory/234BC24D55AC84AA1C" /><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

margin-bottom

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()