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

2016. 5. 11. 13:56language/jquery

 

 

 

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 안에서의 위치 값을 반환한다. 부모 태그가 감싸져 있다면 부모태그를 기준으로 위치값을 반환한다. 상대좌표를 반환한다고 표현하기도 한다.

 

 

 

  • 이전 댓글 더보기
  • 프로필사진
    2017.05.22 11:12

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

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2017.05.22 11:46 신고

      글쎄요 ㅠㅠ

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

    • 프로필사진
      2017.05.22 15:01

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

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2017.05.22 16:25 신고

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

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

  • 프로필사진
    info2017.07.20 23:32

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

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2017.07.21 08:57 신고

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

  • 프로필사진
    궁금2017.11.07 17:50

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

    • 프로필사진
      궁금2017.11.07 17:50

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

    • 프로필사진
      궁금2017.11.07 17:51

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

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2017.11.07 18:01 신고

      안녕하세요 ㅎㅎ

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

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

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

  • 프로필사진
    Favicon of http://ozahir.tistory.com BlogIcon ozahir2018.01.02 17:48

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

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

    왼쪽 frame1
    오른쪽 frame2

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

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

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2018.01.02 17:59 신고

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

  • 프로필사진
    jean2018.09.05 21:00

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

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2018.09.06 14:18 신고

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

  • 프로필사진
    joeylee2018.12.21 11:38

    안녕하세요 항상 좋은글 감사합니다
    한가지 문제를 겪고있어서 질문을 드립니다

    특정 버튼 클릭 이벤트가 발생하면 문서 총 높이의 3/4 지점정도에 있는 특정 div 까지 스크롤 내리는 animate() 함수를 적용하는데요
    본문내용 안에 img 태그들에 lazyloading 이 걸려있어 안보이는 영역은 각각 1px 로 계산을 되어서
    이동하고싶은 특정 div 의 위치를 구하려고 offset을 활용하면 잡으면 본문높이보다 부족합니다

    예시를들면 이미지가 10개정도 있을때 스크롤을 내리지않고 아직 load가 안된 1px X 1px 로 잡힌 이미지들 때문에 animate() 로 이동할 특정 div 의 offset top 값은 6000
    스크롤을 다 내려서 img 를 다 로드해서 완성된 문서에서의 offset top 값은 10000 이렇게 됩니다
    (본문에 이미지 개수는 페이지마다 다를 수 있습니다)

    해결을 위한 팁을 주시면 감사하겠습니다 ㅜㅜ

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2018.12.21 11:53 신고

      반가워요 ㅎㅎ
      lazyloading 플러그인 사용중이라면 load 이벤트가 있을꺼에요 ㅎㅎ
      load 이벤트들을 활용해서 이미지들이 다 load되는 시점을 만들고 그때 화면 사이즈를 재고 이벤트를 걸어주세요 ㅎㅎ

    • 프로필사진
      joeylee2018.12.21 18:18

      답변 감사합니다 ^^

      제가 답변을 제대로 이해를 못한걸수도 있는데요

      현재 문제가 되는 케이스가
      본문에 모든 이미지들에 대해서 lazyloading 플러그인을 사용해 스크롤이 이미지들 위치까지 가야 load를 하고 있어서요( 실제 img 태그 가까이 스크롤위치가 가야 load가 완료되어 1px로 안잡히게 됩니다)

      이 경우 페이지 맨위 상단에서 하단으로 가기 버튼을 눌렀을때 animate() 함수가 호출되면서 해당 div offset top 까지 이동을 하는데

      이때는 이미지들이 load가 되기전이라
      animate() 에 줄 scrollTop 값이 한창 모자란 값이 들어가거든요

      혹시 이런 경우에도 팁이 있을까 싶습니다

      아니면 답변 주신대로
      일단 모든 이미지가 load가 되기전 상태에서 일단 특정 div 까지 animate 함수를 호출해 이동하면서(이때는 스크롤이 내려가면서 img들이 load가 될테니)

      img들이 다 로드가 된 시점을 잡고 기존 animate를 중지하고 다시 계산한 사이즈로 animate 이벤트를 걸라는 말씀이 맞나요??

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2018.12.27 09:11 신고

      각각 이미지가 lazy 로딩된다고 이해했었는데 그게 아니라 스크롤이 이미지 근처에 도달했을 경우 로딩된다고 이해하면 되겠네요 ?

      이미지가 로딩 되기 전(최초)에는 animate 함수를 사용하면 정확한 위치로 가지만 이미지 근처에가서 이미지가 lazy 로딩되면서 스크롤이 늘어나니까 문제가 되는거 같아요

      이럴 경우에는 여러 방법이 있겠지만 이미지가 로딩되면 animate 이벤트를 제거 후 로딩된 이미지를 포함한 현재 화면 높이를 기준으로 다시 이벤트를 설정하면 되지 않을까 싶어요 ㅎㅎ

  • 프로필사진
    나니2019.07.09 15:03

    안녕하세요! 전 디자이너인데요! 혹시 div를 여러개 더 추가해서 할 수도 있나요? 해봤는데 안되서 혹시 스크립트 소스를 건들여야 하는 부분인가요?

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2019.07.09 15:11 신고

      안녕하세요 ㅎㅎ
      div 태그를 여러개 추가해도 됩니다.
      단 div ID의 숫자를 늘려주셔야 합니다.
      div1, div2...div10 이런식으로...
      마찬가지 버튼의 onclick 이벤트의 부분의 함수의 파라미터값도 추가되어야 해요 ~

    • 프로필사진
      나니2019.07.09 15:28

      <div class="button">
      <div onclick="fnMove('1')">div1로 이동</div>
      <div onclick="fnMove('2')">div2로 이동</div>
      <div onclick="fnMove('3')">div3로 이동</div>
      <div onclick="fnMove('4')">div4로 이동</div>
      </div>


      <div id="div4">div4</div>

      이렇게만 추가하면 되는 거 맞나요ㅠㅠ?

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2019.07.09 15:35 신고

      네 ㅎㅎ 맞아요
      고생하세요 ~

  • 프로필사진
    wjd2019.08.14 15:57

    안녕하세요 저는 개발초보자인데요ㅜㅜ하다가 너무궁금한점이있어서 질문드려요
    메뉴를 만들고 저 script 그대로 썼는데요 index랑 서브페이지 두개를 만들고 index 메뉴에다 서브페이지링크를걸었어요 메뉴를누르면 sub페이지로이동을하게요 !! 다른 html이 나오는거죠! 근데 메뉴가총 4개인데 각자 위치값이 다르잖아요 근데 만약 index에서 다른sub페이지로 메뉴를눌러서 이동을하는데 menu 3번을 눌렀을때 menu3번위치값으로 밑에 딱 ! 이동을하는것까지는했는데 안풀리는게 menu3번을 누르면은 sub페이지로이동을하고 이동을 한 순간 body top값이 0이었다가 천천히 슬라이드를하면서 바로 menu3번 좌표값으로 이동을 하게하고싶어요ㅜㅜ 제가설명을 어렵게해서 이해하셨을지모르겠네요ㅠㅠㅠ 정말 모르겠습니다ㅜㅜ

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2019.08.14 16:32 신고

      안녕하세요 ㅎㅎ
      더운데 고생이 많아요
      내용이 잘 이해되지 않아서 도움을 드리기 어려울거같아요 ㅠㅠ;;;;
      제가 이해할 수 있게 설명해주신다면 도움을 드릴 수 있을 듯 합니다 ㅎㅎ;;

  • 프로필사진
    quri2019.09.17 16:04

    안녕하세요 초짜 개발자는 아니고 초짜 퍼블리셔 입니당..
    해당 소스로 스크롤 이동하게는 만들었는데
    버튼을 눌렀을때 해당영역으로 이동하면서 버튼 영역은 상단에 고정된 상태로 이동하게 하려면
    어떻게 해야할까요?
    position fixed 를 쓰고 top:0 을 주면 아예 시작부터 페이지 맨 상단부터 시작하게 되는데 제가 원하는건
    한 중간정도부터 메뉴가 있다가 스크롤을 내리면 스크롤 상단에 닿았을때는 상단에 고정되고 메뉴를 눌렀을때는 메뉴가 상단에 고정됨과 동시에 해당 영역으로 이동되도록 하고싶은데 안되네요..ㅜㅜ 혹시 알려주시면 정말 감사하겠습니다

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2019.09.18 09:39 신고

      안녕하세요 ^^

      질문주신 내용을 요약하자면 스크롤 이동중에도 상단에 메뉴가 계속 보이는걸 원하시는거 같아요

      방법은 많겠지만 지금 떠오르는 생각으로는 스크롤 이동시마다 top 값이 변하는데 그 값을 가지고 메뉴 버튼에 대입하시면 스크롤이 이동하더라도 계속 메뉴버튼이 따라다닐거 같네요 ^^

  • 프로필사진
    dadajulia2019.10.17 11:05

    와 저도 왕초보라 여기 공부하러 들어왔는데 여기 왕초보 성지인가요ㅎㅎㅎ
    2016년도 글임에도 불구하고 지금까지 대댓 성실하게 달아주시는 글쓴이님 보고 많이 배우고갑니다: )
    복받으실거에요!! 모두 화이팅ㅎ.ㅎ

  • 프로필사진
    강한솔2020.01.28 13:03

    안녕하세요 메뉴에서 하위메뉴(사과,바나나,메론)에서 만약 사과를 누르면

    스크롤 되면서 내려가 탭(사과,바나나,메론)에서 사과가 active 되면서 사과에 해당하는 내용까지 보이게 하려면

    어떻게 짜야 될까요? ㅠㅠ

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2020.01.28 13:07 신고

      안녕하세요 ㅎㅎ
      질문 내용이 잘 이해되지 않네요 ㅠㅠ
      메뉴에서 사과를 누르면 스크롤 되는 부분은 본문을 참고하시면 되는데
      스크롤 되었을때 이미 사과에 해당되는 내용이 보여야 한다니...
      사과에 대한 내용이 이미 아래쪽에 출력되어 있기 때문에 스크롤링이 가능하고 그럼 자동으로 내용이 보이지 않나요 ??ㅎㅎ;;;

  • 프로필사진
    강한솔2020.01.28 13:14

    메뉴사과를 누르면 스크롤 되면서 내려가고 사과에해당하는 탭으로가서 이미지까지 보이게 하는거요 ㅠㅠ

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2020.01.28 13:18 신고

      예제를 기준으로 설명드릴게요 ㅎㅎ
      fnMove 함수 가장 아래쪽에 해당 이미지를 불러오거나 출력할 수 있는 로직을 작성하세요 ㅎㅎ
      그럼 스크롤 이후 이미지가 불러와 질 것입니다.
      예를들어 $("이미지태그").attr("src","이미지경로");
      이런 로직이 필요하겠지요 ???

  • 프로필사진
    강한솔2020.01.28 13:22

    $("a[href*='#']").click(function(){

    $('ul.tab > li').removeClass("active");
    $('ul.tab > li').eq($(this).parent().index()).addClass('active');
    $('.tab_body > div').removeClass('active');
    $('.tab_body > div').eq($(this).parent().index()).addClass('active');
    });

    제가 스크롤로 하지를 못해서 이렇게 했는데요. 이거는 스크롤은 안되지만 작동은 됩니다.
    여기서 스크롤되면서 하려면 어떻게 짜야될까요? ㅠㅠ

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2020.01.28 13:25 신고

      클릭 이벤트 가장 아래 다음과 같이 작성해 보시겠어요 ?ㅎㅎ
      var offset = $('.tab_body > div').eq($(this).parent().index()).offset();
      $('html, body').animate({scrollTop : offset.top}, 400);
      되려나 모르겠네요 ㅎㅎㅎㅎ

  • 프로필사진
    강한솔2020.01.28 13:32

    $("a[href*='#']").click(function(){

    $('ul.tab > li').removeClass("active");
    $('ul.tab > li').eq($(this).parent().index()).addClass('active');
    $('.tab_body > div').removeClass('active');
    $('.tab_body > div').eq($(this).parent().index()).addClass('active');

    var offset = $('.tab_body > div').eq($(this).parent().index()).offset();
    $('html, body').animate({scrollTop : offset.top}, 400);


    });

    이렇게 넣으면 될까요? ㅠㅠ

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2020.01.28 13:36 신고

      네 ㅋㅋ 한번 시도해보세요
      저도 일하면서 답변해드리는거라 정신이 좀 없네요 ㅋㅋ
      혹시나 잘 되시면 피드백한번 주세요 ^^

  • 프로필사진
    강한솔2020.01.28 13:44

    안됩니다........ㅠㅠㅠ 아예 다시 짜는 방법으로 알려주시면 감사합니다. ㅠㅠㅠ

  • 프로필사진
    강한솔2020.01.28 13:48

    감사합니다 ㅠㅠ 제가 이메일로 상세히 다시 알려드리겠습니다!!

  • 프로필사진
    Favicon of https://mizmom.tistory.com BlogIcon 보험상담2020.04.11 13:06 신고

    https://kin.naver.com/qna/detail.nhn?d1id=1&dirId=105&docId=352347916

    지식인에 문의를 남겼습니다. 답변이 없어 문의 드립니다.
    하나의 이미지에 각각의 링크를 걸어 div1 div2 div3 의 위치로 이동하는 방법을 구현하려 합니다.
    왕초보라 쉽지가 않습니다. 도움주시면 감사하겠습니다.

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2020.04.12 10:38 신고

      안녕하세요 ㅎㅎ
      해당 글을 읽어보았는데요
      이미지가 1개이고 이미지 중 해당 항목들에 대해서 클릭하여 다른 이벤트를 발생시키고 싶으신거로 이해됩니다.
      일단 이미지가 1개인데 그 이미지 내에서 해당 항목을 선택하려면 1개의 이미지 내에서 영역(좌표)를 분할해서 이벤트를 넣어야 하는데 이는 많이 번거롭고 다양한 문제를 일으킬 수 있어 잘 사용되지 않습니다.
      해당 이미지들을 모두 잘라서 각각의 태그를 만들어 이벤트를 주입시키는 방향으로 진행을 하시는게 추후 상품이 바뀌더라도 손쉽게 변환할 수 있는 등의 장점이 발생합니다.

  • 프로필사진
    kimstone79@gmail.com2020.04.13 16:30

    답변 감사드립니다.

  • 프로필사진
    최고의 함수2020.05.21 13:26

    최고의 기능, 최고의 함수
    정말 감사합니다.

  • 프로필사진
    2020.06.02 10:56

    function fnMove(seq){
    var offset = $("#div" + seq).offset();

    fnMove(seq) 안에 seq 는 무슨 뜻인가요?
    $("#div" + seq) 얼핏 보기에 #div + seq 가 div 에 숫자 인거 같긴한데 정확히 무슨 의미인지 모르겠네요..

    개발자님 덕에 많이 배우고 갑니다.

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2020.06.02 13:39 신고

      안녕하세요 ㅎㅎ
      본문 소스중에 버튼 태그 보시면 fnMove 함수 호출하는 부분 있어요
      거기에 seq값이 하드코딩되어있습니다 ㅎㅎ