[제이쿼리] 책갈피기능 구현하는 쉬운 방법

제이쿼리를 사용해서 책갈피기능...

웹페이지에서 내가 원하는 위치로 휘리릭 버튼을 누르면 이동하는 기능이죠.

간단히 구현이 가능합니다.

아래코드가 구현의 핵심인데요,

  <script>
    function fnMove(seq){
        var offset = $("#div" + seq).offset();
        $('html, body').animate({scrollTop : offset.top}, 400);
    }
</script>

 

<div id="div1"> 첫번째 이동할 곳의 내용들... </div>

<div id="div2"> 두번째 이동할 곳의 내용들... </div>

<div id="div3"> 세번째 이동할 곳의 내용들...  </div>

위의 코드로 구현하면 됩니다.

간단히 부연설명을 하면, 본문의 Html에 당연히 버튼을 만들어야 겠지요.

   <button type="button" class="btn btn-warning btn-lg btn-lg" onclick="fnMove('1')">이동1</button>
   <button type="button" class="btn btn-danger btn-lg btn-lg" onclick="fnMove('2')">이동2</button>
   <button type="button" class="btn btn-secondary btn-lg btn-lg" onclick="fnMove('3')">이동3</button> 

이동1~이동3 버튼을 누르면 화면의 스크롤이 해당 문구 div테그쪽으로 이동하는 것입니다.

부트스트랩을 이용해서 class에 이상한 내용들이 있는데, 무시해도 좋습니다. 버튼을 이쁘게 꾸미기 위해서 그렇게 만든것이니까요.

그럼 잘 활용하시길 바래요~