[JQUERY] 어떻게 페이지의 특정 요소로 이동합니다? [복제]

어떻게 페이지의 특정 요소로 이동합니다? [복제]

해결법

1. ---

   1.다음과 같이 보일 것이다 양식을 플러그인의 표준 기술 :

   다음과 같이 보일 것이다 양식을 플러그인의 표준 기술 :

   (function($) {
       $.fn.goTo = function() {
           $('html, body').animate({
               scrollTop: $(this).offset().top + 'px'
           }, 'fast');
           return this; // for chaining...
       }
   })(jQuery);
   

   그럼 그냥 $ ( '#의 div_element2')을 말할 수 고토 ().; 으로 스크롤

   . 처리 및 구성 기능 옵션은 독자들에게 연습으로 남아 있습니다.

2. ---

   2.요소가 페이지에 현재 표시되지 않는 경우, 당신은 기본 scrollIntoView () 메서드를 사용할 수 있습니다.

   요소가 페이지에 현재 표시되지 않는 경우, 당신은 기본 scrollIntoView () 메서드를 사용할 수 있습니다.

   $('#div_' + element_id)[0].scrollIntoView( true );
   

   진정한 수단이 페이지의 상단에 정렬하고 어디 거짓은 아래로 정렬됩니다.

   그렇지 않으면, 당신이 사용할 수있는 jQuery를위한 scrollTo () 플러그인이있다.

   아니면 바로 위에 위치 () 요소의 (문서)를 얻고, 그 위치에 scrollTop () (문서)를 설정 :

   var top = $('#div_' + element_id).position().top;
   $(window).scrollTop( top );
   

3. ---

   3.

   document.getElementById("elementID").scrollIntoView();
   

   같은 일을하지만, 함수에 포장 :

   function scrollIntoView(eleID) {
      var e = document.getElementById(eleID);
      if (!!e && e.scrollIntoView) {
          e.scrollIntoView();
      }
   }
   

   이것은 심지어 아이폰에 iframe에 작동합니다.

   에서 getElementById를 사용의 예 : http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_getelementbyid

4. ---

   4.여기에 대한 간단한의 자바 스크립트입니다

   여기에 대한 간단한의 자바 스크립트입니다

   당신이 ID를 가진 요소 = "yourSpecificElementId"로 화면을 스크롤 할 필요가있는 경우에는,이 전화

   window.scroll(0,findPos(document.getElementById("yourSpecificElementId")));
   

   당신은 작업에 대해이 기능이 필요합니다 :

   //Finds y value of given object
   function findPos(obj) {
       var curtop = 0;
       if (obj.offsetParent) {
           do {
               curtop += obj.offsetTop;
           } while (obj = obj.offsetParent);
       return [curtop];
       }
   }
   

   화면은 사용자의 특정 요소에 스크롤됩니다.

5. ---

   5.페이지의 특정 요소에 스크롤하려면, 당신은 당신의 jQuery를 (문서)로 .ready 기능을 추가 할 수 있습니다 (함수 ($)를 {...})으로는 다음과 같습니다 :

   페이지의 특정 요소에 스크롤하려면, 당신은 당신의 jQuery를 (문서)로 .ready 기능을 추가 할 수 있습니다 (함수 ($)를 {...})으로는 다음과 같습니다 :

   $("#fromTHIS").click(function () {
       $("html, body").animate({ scrollTop: $("#toTHIS").offset().top }, 500);
       return true;
   });
   

   그것은 모든 브라우저에서 마법처럼 작동합니다. 당신의 필요에 따라 속도를 조절합니다.

from https://stackoverflow.com/questions/4801655/how-to-go-to-a-specific-element-on-page by cc-by-sa and MIT license