[자바스크립트] offset 함수를 이용한 원하는 위치로 화면을 이동해보자!

제이쿼리중에 offset() 이라는 함수가 있습니다.

offset() 함수는 원하는 선택자의 위치값을 top , left 형식을 반환하여 줍니다.

http://www.jquery.com에서 가지고온 예제를 보시면 간단히 이해하실수 있습니다.

예문1)

<body>
     
    <p>Hello</p>
    <p>2nd Paragraph</p>
    
    <script>
        var p = $("p:last");
        var offset = p.offset();
        p.html( "left: " + offset.left + ", top: " + offset.top );
    </script>
    
</body>


결과값 : left:10, top:53

예문설명 : P태그의 마지막요소를 선택하여 선택된 P태그의 위치값을 offset() 함수로 가져와 left,top 의 위치값을 html() 함수로 찍은것입니다.

그럼 저 offset() 함수를 이용하여 Top, Down 버튼을 만들어 이동시키는 소스를 작성해보았습니다.

var topPos = $('#header').offset();
var downPos = $('#down').offset();
    
$('.topbtn').click(function(){
    $('body,html').animate({scrollTop:topPos.top},300);  
});
    
$('.downbtn').click(function(){
    $('body,html').animate({scrollTop:downPos.top},300);
});

설명 : HTML상의 Header,Down 의 위치값을 offset 함수로 알아내어

topPos, downPos 변수에 저장을 한뒤 body부분에 애니매이션을 걸어서

해당변수의 top 값만 이동을 하도록 소스를 짜본것입니다.

저작자표시 비영리 동일조건

'웹관련 > JavaScript-Jquery' 카테고리의 다른 글

[자바스크립트] 입력필드에서 숫자만 입력받기 (0)	2016.11.03
[자바스크립트] 즐겨찾기 와 시작페이지 링크만들기 (0)	2016.11.02
[자바스크립트] 마우스 스크롤시 현재 위치값 알아내기 (0)	2016.11.02
[Jquery] Animate easing 효과 적용하기 (0)	2016.09.28
[자바스크립트] 기초 - 부모창 새로고침하면서 자신의 창 닫기 (0)	2016.09.28