jquery 를 이용해서 원하는 태그(위치)로 스크롤 이동해 보자.

 

맨 아래에서 절대위치와 상대위치를 구하는 offset 함수와 position 함수에 대해서 간단히 설명한다.

 

 



 

특정 태그가 있는 곳까지 자동으로 스크롤이 되서 이동해야 하는 경우들이 종종 있다.

 

그럴 경우에 쉽게 사용할 수 있는 방법이다.

 

소스를 직접 설명한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<HTML>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style>
    div {margin-bottom:1000px;}
</style>
<script>
    function fnMove(seq){
        var offset = $("#div" + seq).offset();
        $('html, body').animate({scrollTop : offset.top}, 400);
    }
</script>
 <BODY>
    <button onclick="fnMove('1')">div1로 이동</button>
    <button onclick="fnMove('2')">div2로 이동</button>
    <button onclick="fnMove('3')">div3로 이동</button>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
 </BODY>
</HTML>
 
cs

2# : jquery import

4# : 임의로 div 태그들의 간격을 margin-bottom 을 이용하여 줌 (스크롤이 생기도록 하기 위해서)

7# : 스크롤 이동을 할 함수

8# : 이동하고 싶은 태그를 선택하여 offset() 함수를 이용하여 절대좌표가 있는 객체를 가져온다. (아래 설명 참고)

9# : jquery animate의 scrollTop 함수를 이용하여 절대좌표 top 위치로 이동한다. (400 은 이동되는 시간)

 

 



 

태그의 위치를 가져오는 함수는 offset, position 이 있다.

두 함수의 차이점에 대해 간단히 설명하겠다.

 

offset : document 안에서의 위치 값을 반환한다. 쉽게 말해 페이지 전체를 기준으로 위치값을 반환한다. 절대좌표를 반환한다고 표현하기도 한다.

 

position : DOM 안에서의 위치 값을 반환한다. 부모 태그가 감싸져 있다면 부모태그를 기준으로 위치값을 반환한다. 상대좌표를 반환한다고 표현하기도 한다.

 

 

 

by 개발자 CofS 2016.05.11 13:56
  • 제발알려주세여 2016.07.21 20:37 신고 ADDR EDIT/DEL REPLY

    위에 글은 진짜엄청엄청 많이 도움되었습니다.
    하나만 더 알려주세요..........
    만약 div1 을 클릭하였을때 div1이 화면 맨위로 올라가게 불러오잖아요
    그걸 div1을 눌렀을때 화면 중간으로 불러오는 방법은 없을까요?? 제가 진짜 초보라서 잘모르겠습니다 ㅠㅠ
    좀 알려주세요
    9# $('html, body').animate({scrollTop : offset.top}, 400); 이부분일것 같아보이는데 ㅠㅠ 뭘 수정해야할지 모르겠습니다. 알려주세요!!!!!!!!!!
    아 만약 부르는게 중간에 가능하다면 혹시 원하는 위치 같은것도 다 지정할수 있는지... 있다면 진짜 좀 부탁드릴게요

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2016.07.22 09:28 신고 EDIT/DEL

      안녕하세요 ㅎㅎ
      어제 저녁에 확인했는데 엄청급박해보여서 ㅋㅋ 최대한 빨리 왔습니다
      var offset = $("#div" + seq).offset();
      var winH = $(window).height();
      $('html, body').animate({scrollTop : (offset.top - winH/2)}, 400);
      아마 이렇게 해보시면 될거같아요 ㅎㅎ

      간단하게 설명드리면 window height 즉 브라우저 크기 구해서 그 크기 반만큼 더 내려가도록 하는 것입니다.

      Go for it !!!!

    • 제발알려주세여 2016.07.22 10:37 신고 EDIT/DEL

      와.............진짜 덕분에 무릎을 탁치고 감탄하였습니다.......
      정말 많은 큰 도움 되었습니다!!!!!!! 너무 감사해요!!!!!!!!!
      좋은 하루되세요!!!!!!!!!!!!!! 진짜 감사합니당

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2016.07.22 12:28 신고 EDIT/DEL

      ㅋㅋ고생하시고 모르는거있으면 언제든지ㅋㅋ

  • 안녕하세요 2016.07.29 11:38 신고 ADDR EDIT/DEL REPLY

    제가 반응형웹으로 페이지를 만들고 있는데, 전체화면일 때는 지정된 위치로 잘 이동이 됩니다.
    @media screen and (max-width: 480px)
    {
    #header ul li a{width: 80px; height: 20px; line-height: 20px; text-align: center;}
    #sub {width: 99.5%; left: 0%; margin-left: 0%;}
    #content {width: auto; float: none; min-height: 200px; margin-left: 0px;}
    #side {width: auto; min-height: 0; margin-left: 0px;}
    }
    이렇게 화면이 작아졌을때는 전체적인 content나 side가 작아지거나 변환이되서 내려가는 위치를 변경해야
    하는데.. 저 <style type='text/css'> 안에다가 내려가는 위치를 조절할수 있게 function fnMove같은 것을 새로 줄 수 있을까요??

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2016.07.29 15:39 신고 EDIT/DEL

      안녕하세요 ㅎㅎ
      설명만으로 잘 이해가 되지 않네요 ㅜ
      상황이나 현상을 이해할 수 있는 샘플을 볼수 있을까요 ??

    • 안녕하세요 2016.07.29 16:41 신고 EDIT/DEL

      에고;; 샘플을 어떻게 보여드릴지 몰라서 ㅠㅠ
      좀 자세히 설명하자면.. jsp파일에 script fnMove를 줘서 클릭시 이동하기를 적용하였습니다.

      이 jsp파일에는 style text/css 이렇게 css도 적용되어있는데.. 위에 댓글처럼 반응형으로 만들면 기존에 있던 메뉴의 사이즈가 바뀌어서 fnMove의 이동위치를 조절해야합니다(fnMove는 제대로 왔으나, 다른메뉴들이 위치나 사이즈가 바뀜으로 fnMove를 새로 조절하고싶음)
      ...에고 말로 설명하자니 너무 어렵네요 ㅠㅠ

      간략하게 말하면 <style> 안에 <scrpit> fnMove를 또 한번 주고싶은 것 입니다..;
      jsp의 이동이 아니고 한페이지인데, 반응형을 줘서 페이지의 크기에 따라 fnmove의 이동위치를 바꾸고 싶은것입니다... ㅠㅠ
      혹시 말이 너무 헷갈리시다면 메일이라도 알려주시면 제가 jsp를 보내드리겠습니다 ㅠㅠ

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2016.07.29 17:18 신고 EDIT/DEL

      와우 ㅋ 댓글로 설명하시니 너무어렵습니다
      소스를 설명해주신 부분은 감사한데 제가 이해력이 많이 모자라는듯 합니다 ㅠ

      메일로 보내주세요 ^^

      * 보내주신 파일 확인중에 있습니다.

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2016.08.01 13:40 신고 EDIT/DEL

      대학교 프로젝트 같은거 하시나봐요 ㅎㅎ

      일단 아래 함수 사용하시면 됩니다.

      기존 소스중에서 window height를 2.2로 나눈부분은 잘 이해가 안되네요 ㅠ

      아래 함수 분석해보시고 모르는 부분은 물어보시면 설명해드리겠습니다 ^^





      function fnMove(seq){
      var targetOffset = $("#div"+seq).offset(); // 이동할 타겟 위치 = div
      var subHeight = $("#sub").height(); // 메뉴 높이 = sub라는 id 를 가진 div
      var targetParentHeight = $("#div"+seq).parent().height(); // 이동할 div 의 부모 높이 = table > td
      var border = 9; // table 의 border 값 (정확하게 이동하기 위해서)

      var top = targetOffset.top - subHeight - targetParentHeight - border;

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

    • 안녕하세요 2016.08.01 14:24 신고 EDIT/DEL

      완벽하게 잘 실행이됩니다...
      정말 감사드립니다.

      아 제가 window height를 2.2로 나눴었던 것은 위에 댓글에 화면의 중간 정도로 가는 게 winH/2 되있는거 보고 /2를 조절해서 제가 원하는 위치에 맞추려고 2.2로 나눠봤던 것입니다.ㅎㅎ
      진짜 깔끔하게 잘 해결됬어요!
      너무 감사드려요~!

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2016.08.01 15:20 신고 EDIT/DEL

      다행이네요 ㅎㅎ
      이번 기회에 태그들의 위치를 자유롭게 꺼내거나 사용할 수 있는 연습을 해보시는게 어떨까 싶어요 ㅎㅎ

      드린 소스는 꼭 본인걸로 만들어서 이해하시고 지나가길 바래요 ㅎㅎ

      필요한 내용있으시면 언제든지 시간나는대로 봐드릴게요 ㅎㅎ

      고생하세요 !!ㅋㅋ

  • 애기개발자 2016.10.06 18:21 신고 ADDR EDIT/DEL REPLY

    캬 정말 허접하게 a name, # 태그로 이동했었는데 깔끔해졌습니다..ㅎㅎ

    번외로 하나만 여쭤봐도 될런지요!!??
    메뉴를 클릭하고 해당위치로 가는데, 지금 보고있는 화면이 이메뉴다~라고 표시를 하고싶어서
    이동과 동시에 보고있는 내용의 해당 메뉴버튼에 border를 주거나..background-color를 변경해주거나 뭔가 표시를
    하고싶은데..스크립트 짜기가 좀 힘드네요;혹시 조언을 얻을수있을까요??

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2016.10.07 09:07 신고 EDIT/DEL

      도움이 되실려나 모르겠어요 ㅎㅎ
      소스를 직접 드릴 수도 있지만 공부하시고 계신듯 하여 힌트를 드릴까 합니다

      1.버튼에 id를 순번을 붙혀서 부여합니다. btn1, btn2, btn3...
      2. 제 블로그 jquery 메뉴에서 selector에 관한 글을 보면 루프(each)를 이용해서 태그들을 순회할 수 있습니다. btn으로 시작하는 태그들을 루프돌면서 배경색을 초기화 합니다.
      3. 클릭된 버튼의 배경색을 변경합니다

      끝 ^^

    • 애기개발자 2016.10.07 10:48 신고 EDIT/DEL

      잘 이해를 못했나봐요ㅠㅠ일단 버튼은 아니구 td에 onclick 을 주었거든요
      <div class="quick_menu">
      <table align=center border=0 cellspacing=0 cellpadding=0>
      <tr><td align=center style="cursor:pointer;" onclick="fnMove('1')"><img src="images/1.png" align=absmiddle></td></tr>
      <tr><td align=center style="cursor:pointer;" onclick="fnMove('2')"><img src="images/2.png" align=absmiddle></td></tr>
      <tr><td align=center style="cursor:pointer;" onclick="fnMove('3')"><img src="/images/3.png" align=absmiddle></td></tr>
      </table>
      </div>

      그래서 여기다가
      스크립트를
      function fnMove(seq){
      var offset = $("#div" + seq).offset();
      $('html, body').animate({scrollTop : offset.top}, 100);


      $(document).ready(function() {

      $('').bind("click", function() {
      var num = $(this).index();

      $('div table tr td').css("border", "none");
      $('div table tr td:eq('+num+')').css("border", "1px solid red");
      });
      });
      }

      이런식으로 만들어보고 있었는데..말씀해주신 방법이 이해가 잘안되네요ㅠㅠ죄송함다ㅠㅠ

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2016.10.07 12:43 신고 EDIT/DEL

      위에 글이 이해가 안되신다니 좀더 쉽게 설명해드릴게요

      td 에 아이디를 부여합니다. menu1, menu2, menu3

      그리고 fnMove 함수에서 jquery ^ 선택자를 이용해서 menu로 시작하는 태그들을 each로 루프돌면서 css 를 초기화 합니다.

      다음으로 seq 파라미터를 이용해서 menu + seq로 클릭한 td 태그를 선택하고 css를 적용합니다

    • 애기개발자 2016.10.07 14:06 신고 EDIT/DEL

      감사합니다..ㅎ해결하였습니다
      많은 정보 오픈해주셔서 너무 감사합니다

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2016.10.07 14:08 신고 EDIT/DEL

      도움이 되셨다니 저 또한 감사합니다 ^^

  • 꿈나무 2016.10.27 00:34 신고 ADDR EDIT/DEL REPLY

    안녕하세요 이제 공부한지 얼마안된 애기입니다
    소스 공부중에 궁금한점이 있어서 글을 남깁니다ㅠㅠ
    저는 버튼식이아닌 스크롤을 내렸을때 자동적으로 div로 스무스하게 이동시키고싶은데
    어떤식으로 해야할까요..

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2016.10.27 09:10 신고 EDIT/DEL

      스크롤을 내리면 특정 div가 스크롤위치에 맞게 이동하게 하고싶으신건가요 ???

    • 꿈나무 2016.10.27 12:07 신고 EDIT/DEL

      네 맞습니다.
      예를들어 section1,section2 이렇게 풀화면으로 위치하고있으면 스크롤 내릴시에 2번으로 화면에 맞게 부드럽게이동하는것입니다ㅠㅠ

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2016.10.27 16:19 신고 EDIT/DEL

      $(function(){
      $(window).scroll(function(event){
      var st = $(this).scrollTop();
      $("#divTT").css("top",st + 20);
      });
      });

      간단하게나마 도움을 드려봅니다 ^^
      이런게 맞는지 모르겠네요

    • 꿈나무 2016.10.28 09:35 신고 EDIT/DEL

      해보겠습니다! 감사합니다ㅠㅠ

  • 강세롬 2016.10.31 12:43 신고 ADDR EDIT/DEL REPLY

    개발자님 ㅠㅠ 저도 왕왕 초보인데요ㅠㅠ
    만약에 메뉴가 들어있는 문서와 컨텐츠가 들어있는 문서가 서로 다르고 a태그로 그 문서로 링크걸어놓고 컨텐츠가 들어있는 색션중 그 위치로 스크롤 되고 싶은데요 어떻게 코딩해야할까요?ㅠㅠ

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2016.10.31 13:01 신고 EDIT/DEL

      메뉴에서 다른 페이지로 이동 후 스크롤 이동을 하는건가요 ?

      제가 이해한게 맞다면 메뉴에서 컨텐츠 페이지로 링크이동 후 ready 함수에서 색션으로 스크롤이동 하는게 좋을거같아요 ㅎㅎ

  • 찐찐 2016.12.21 21:29 신고 ADDR EDIT/DEL REPLY

    안녕하세요 개발자님! 코딩을 배운지 얼마 안된 햇병아리입니다!
    혹 지금 올려주신 소스에서 <button onclick>이 아닌 다른 div를 버튼화 시켜서 이 소스들 처럼 스크롤 이동이 가능할까요? 예를 들자면 버튼이 아닌 이미지나 ul 메뉴나 다른 단어같은 걸로여!
    그게 안된다면 css로 버튼의 형태나 색이나 position 위치등을 조정하는 방법을 알고싶습니다...ㅠ

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2016.12.22 09:11 신고 EDIT/DEL

      질문이 제가 이해한게 맞는지 모르겠네요 ㅎㅎ
      위 예제는 div 태그로 예를 든 것이고 onclick 이벤트를 가지고 있는 태그라면 뭐든 상관없이 만들 수 있습니다.

    • 찐찐 2016.12.22 10:25 신고 EDIT/DEL

      헛! 제가 원클릭을 잘 몰라서 헤매다가 댓글을 보고 다시 요리조리 해보니 되었습니다! 덕분에 새로운 걸 알아가요 ㅜㅜ 감사합니다!감사합니다!

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2016.12.22 10:28 신고 EDIT/DEL

      온클릭이라고 읽으면 될거같아요 ㅎㅎ
      궁금한게 있으시면 언제든 ^^

  • 부갱 2017.03.31 10:03 신고 ADDR EDIT/DEL REPLY

    위에 fixed된 네비크기가 95px이라 top으로 스크롤값을 하면 위에 네비 길이만큼 가려집니다ㅠㅠ
    네비 길이만큼 스크롤 위치를 설정할수있을까요??

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2017.03.31 10:16 신고 EDIT/DEL

      네비라는것이 무엇이며 네비라는 것의 크기가 95px인데 top으로 스크롤하면 네비길이만큼 가려진다니... 무엇이 가려지는지 어떤식으로 가려지는지...??
      또한 네비 길이만큼 스크롤 위치를 설정할 수 있을까... 스크롤이 네비 길이만큼 내려와서 위치해야하는건지 올라가서 위치해야하는건지 네비 길이만큼 위치를 설정한다는건 무슨 의미인지...
      글로써 이해하기가 어렵네요ㅠ

  • 2017.05.22 11:12 신고 ADDR EDIT/DEL REPLY

    안녕하세요 질문하나 드려도 될까요?
    onclick도 잘 먹히고 offset값도 잘 가져오는데
    animate가 안먹히네요
    $('html, body').stop().animate({scrollTop : offset().top}, 400);
    이 부분이 안먹히는데 ㅜㅜ 어찌 된 일일까요?
    에러 또한 나지 않아요

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2017.05.22 11:46 신고 EDIT/DEL

      글쎄요 ㅠㅠ

      예제와 완전 똑같이 해보셨는데 안되시나요 ?

    • 2017.05.22 15:01 신고 EDIT/DEL

      넹 ㅜㅜ
      혹시 jquery를 다른거로 import해야할까요??
      아님 $('html, body')말고 다른 태그를 줄 순 없을까요..?

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2017.05.22 16:25 신고 EDIT/DEL

      제가 방금 저 소스 그대로 복사해서 테스트 해봣는데 잘되네요

      테스트 환경은 ie11, 크롬최신, 웨일브라우저 입니다.

  • info 2017.07.20 23:32 신고 ADDR EDIT/DEL REPLY

    안드로이드에서 원페이지에서 구성하면 잘 되는데
    다른페이지로 넘어갔다가 abc.com/#about으로 링크를 걸어서 다시 넘어오게 했을때
    이상한 곳으로 가는걸까요??
    PC에서는 잘되는데 모바일에서만 문제가 발생합니다.

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2017.07.21 08:57 신고 EDIT/DEL

      글쎄요 ㅠ
      전체적인 구성과 소스를 모르고서는 정확히 어떤 문제가 있을거라고 말씀드리기가 어렵네요 ㅠ

  • 궁금 2017.11.07 17:50 신고 ADDR EDIT/DEL REPLY

    그냥 맨위로 부드럽게 올리려면 어떻게 해야 할까요?

    • 궁금 2017.11.07 17:50 신고 EDIT/DEL

      맨위에 ID를 줄 수 없을때 그냥 맨 위로 올리는 방법이요 ㅠㅠ

    • 궁금 2017.11.07 17:51 신고 EDIT/DEL

      마찬가지로 맨밑에 ID를 줄 수 없을 때 그냥 맨밑으로 내리려면 어떻게 해야 할까요??

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2017.11.07 18:01 신고 EDIT/DEL

      안녕하세요 ㅎㅎ

      본 예제는 스크롤을 각 태그의 offset 값으로 이동시키는 예제입니다.

      조금만 생각해 보시면 답이 나옵니다.

      화면의 최상단 offset 값과 최 하단 offset 값을 대입한다면 해결하실수 있을거라 생각합니다.

  • Favicon of http://ozahir.tistory.com BlogIcon ozahir 2018.01.02 17:48 신고 ADDR EDIT/DEL REPLY

    좋은글 잘 보고 있습니다.
    한가지 질문이 있는데요.

    제가 업무상 사용하는 페이지가 frameset으로 된게 있는데요.

    왼쪽 frame1
    오른쪽 frame2

    오른쪽에 스크립트를 넣어서
    특정 단어에 대해서 클릭하면
    frame1에서는 그 단어로 이동하게(된다면 색깔도 바꿔서 강조까지..)
    만들고 싶습니다. 이게 jquery로 가능한지 궁금합니다.
    php는 많이 다뤄봤는데 자바쪽은 거의 무지해서요..
    가능하지 않나싶어서 여기저기 찾아보는 단계인데요.

    가능하다/ 가능하지 않다. 이것만 우선 알려주셔도 큰 도움이 될거 같습니다.

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2018.01.02 17:59 신고 EDIT/DEL

      프레임과 상위 페이지간 함수나 변수를 사용할 수 있습니다
      그렇기 때문에 잠깐 고민해 본 결과 충분히 가능하리라 생각이 듭니다ㅎㅎ

  • jean 2018.09.05 21:00 신고 ADDR EDIT/DEL REPLY

    안녕하세요ㅜㅜ 정보 정말 감사합니다.
    버튼을 이미지로 바꿀 수 없는건가요? ㅜㅜ 제가 하나도 몰라서ㅜㅜ 버튼에 이미지링크를 넣었더니 모바일로는 특정 사이즈로밖에 보여지지 않습니다ㅜ
    애기개발자님과 같은 질문인것 같긴 한데 정말 모르겠습니다ㅜㅜ

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2018.09.06 14:18 신고 EDIT/DEL

      버튼을 이미지로 바꾸는게 어려우시면 이미지 태그에 onclick 이벤트를 걸어보시는건 어떨까요?ㅎㅎ