복붙노트

[JQUERY] 어떻게 jQuery를 사용하여 특정 항목으로 이동합니다?

JQUERY

어떻게 jQuery를 사용하여 특정 항목으로 이동합니다?

해결법

  1. 1.죽은 간단합니다. 어떤 플러그인이 필요하지 않습니다.

    죽은 간단합니다. 어떤 플러그인이 필요하지 않습니다.

    var $container = $('div'),
    $scrollTo = $('#row_8');

$container.scrollTop(
    $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
);

// Or you can animate the scrolling:
$container.animate({
    scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
});​

    다음은 작업 예입니다.

    scrollTop에 대한 문서.

  2. 2.나는이 컨테이너에 스크롤 응답하지 않습니다 실현하지만, 사람들이 유용한 그래서를 찾고있다 :

    나는이 컨테이너에 스크롤 응답하지 않습니다 실현하지만, 사람들이 유용한 그래서를 찾고있다 :

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

    문서 스크롤 중 하나에있을 수 있기 때문에 우리는 HTML과 몸을 모두 선택하고 그것을 결정하기 어렵다. 최신 브라우저를 들어 당신은 $ (는 document.body) 멀리 얻을 수 있습니다.

    또는 페이지 상단으로 이동합니다 :

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

    또는 애니메이션없이 :

    $(window).scrollTop(some_element.offset().top);

    또는...

    window.scrollTo(0, some_element.offset().top); // native equivalent (x, y)

  3. 3.나는이 무의미을위한 플러그인을 사용하여, 케빈 다른 사람과 동의합니다.

    나는이 무의미을위한 플러그인을 사용하여, 케빈 다른 사람과 동의합니다.

    window.scrollTo(0, $("#element").offset().top);

  4. 4.내가 직접 할 수 있었다. 모든 플러그인에 대한 필요가 없습니다. 내 요점을 체크 아웃 :

    내가 직접 할 수 있었다. 모든 플러그인에 대한 필요가 없습니다. 내 요점을 체크 아웃 :

    // Replace #fromA with your button/control and #toB with the target to which     
// You wanna scroll to. 
//
$("#fromA").click(function() {
    $("html, body").animate({ scrollTop: $("#toB").offset().top }, 1500);
});

  5. 5.당신은 자바 스크립트 scrollIntoView () 메서드를 사용할 수 있습니다. 단지 id.scrollIntoView ()를 제공;

    당신은 자바 스크립트 scrollIntoView () 메서드를 사용할 수 있습니다. 단지 id.scrollIntoView ()를 제공;

    예를 들면

    row_5.scrollIntoView();

  6. 6.당신은 JQuery와 scrollTo 플러그인 플러그인을 사용할 수 있습니다 :

    당신은 JQuery와 scrollTo 플러그인 플러그인을 사용할 수 있습니다 :

    $('div').scrollTo('#row_8');

  7. 7.컨테이너의 중심 요소를 가지고합니다.

    컨테이너의 중심 요소를 가지고합니다.

    CODEPEN에 DEMO

    function scrollToCenter() {
  var container = $('.container'),
    scrollTo = $('.5');

  container.animate({
    //scrolls to center
    scrollTop: scrollTo.offset().top - container.offset().top + scrollTo.scrollTop() - container.height() / 2
  });
}

    <div class="container">
   <div class="1">
    1
  </div>
  <div class="2">
    2
  </div>
  <div class="3">
    3
  </div>
  <div class="4">
    4
  </div>
  <div class="5">
    5
  </div>
  <div class="6">
    6
  </div>
  <div class="7">
    7
  </div>
  <div class="8">
    8
  </div>
  <div class="9">
    9
  </div>
  <div class="10">
    10
  </div>


</div>
<br>
<br>
<button id="scroll" onclick="scrollToCenter()">
  Scroll
</button>

    .container {
  height: 60px;
  overflow-y: scroll;
  width 60px;
  background-color: white;
}

    그것은 중앙에 정확한되지 않습니다하지만 당신은 더 큰 요소를 인식하지 못합니다.

  8. 8.당신은 jQuery를 자바 스크립트로 스크롤 할 수 있습니다 그냥 두 요소 jQuery를이 자바 스크립트 코드가 필요합니다 :

    당신은 jQuery를 자바 스크립트로 스크롤 할 수 있습니다 그냥 두 요소 jQuery를이 자바 스크립트 코드가 필요합니다 :

    $(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to-id").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 1500);
  });
});

    () {(기능 $ // 일반 선택기 사용 어디서나 할 수 $ ( ". JS-스크롤에-ID"). {() 함수 (예를 클릭합니다 // 동적 HREF를 가져옵니다 VAR 대상 = $ (이) .attr ( 'HREF'); URL을 해시를 변경에서 // 방지는 HREF = "#"링크 (선택 사항) e.preventDefault (); // 애니메이션 스크롤 대상으로 $ ( 'HTML, 몸'). 애니메이션 ({ scrollTop :. $ (대상) .offset () 상단 }, 1500); }); }); # pane1 { 배경 : # 000; 폭 : 400 픽셀; 높이 : 400 픽셀; } # pane2 { 배경 : # FF0000; 폭 : 400 픽셀; 높이 : 400 픽셀; } # pane3 { 배경 : #ccc; 폭 : 400 픽셀; 높이 : 400 픽셀; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    • 항목 1 를
    • 항목 2 를
    • 항목 3 를
      • 항목 1 를
      • 항목 2 를
      • 항목 3 를

      • 9.나는 다른 사람이 게시 한 내용의 조합을했다. 그것의 간단하고 부드러운

        나는 다른 사람이 게시 한 내용의 조합을했다. 그것의 간단하고 부드러운

         $('#myButton').click(function(){
        $('html, body').animate({
            scrollTop: $('#scroll-to-this-element').position().top },
            1000
        );
    });

      • 10.자바 스크립트 scrollTo 기능 내장 거기로 아무도, 명백한 말한다 확실하지 이유 :

        자바 스크립트 scrollTo 기능 내장 거기로 아무도, 명백한 말한다 확실하지 이유 :

        scrollTo( $('#element').position().top );

        참고.

      • 11.여기에 대부분의 사람들이 제안하는 것과는 반대로, 나는 당신이 움직임을 애니메이션을 적용 할 경우 플러그인을 사용 할 것을 권 해드립니다. 그냥 애니메이션 scrollTop 매끄러운 사용자 경험을 위해 충분하지 않습니다. 추론 여기 내 대답을 참조하십시오.

        여기에 대부분의 사람들이 제안하는 것과는 반대로, 나는 당신이 움직임을 애니메이션을 적용 할 경우 플러그인을 사용 할 것을 권 해드립니다. 그냥 애니메이션 scrollTop 매끄러운 사용자 경험을 위해 충분하지 않습니다. 추론 여기 내 대답을 참조하십시오.

        나는 지난 몇 년 동안 플러그인의 숫자를 시도했지만 결국 하나에게 자신을 작성했습니다. 당신은 그것을 스핀을 제공 할 수 있습니다 : jQuery.scrollable합니다. 그 사용하여 스크롤 동작이됩니다

        $container.scrollTo( targetPosition );

        그러나 그것은 모두가 아니다. 우리는 너무, 목표 위치를 수정해야합니다. 당신은 다른 답변에서 볼 수 계산,

        $target.offset().top - $container.offset().top + $container.scrollTop()

        대부분 작동하지만 완전히 정확하지 않습니다. 그것은 제대로 스크롤 컨테이너의 테두리를 처리하지 않습니다. 타겟 요소 테두리의 크기가 너무 멀리 위쪽으로 스크롤된다. 여기 데모입니다.

        따라서, 목표 위치를 계산하기위한 더 좋은 방법은

        var target = $target[0], 
    container = $container[0];

targetPosition = $container.scrollTop() + target.getBoundingClientRect().top - container.getBoundingClientRect().top - container.clientTop;

        다시 말하지만, 행동에서 볼 수있는 데모를 보라.

        목표 위치를 반환하고 모두 윈도우 및 비 윈도우 스크롤 용기 작동하는 기능의 경우,이 요점을 사용하여 주시기 바랍니다. 거기에 코멘트 위치를 계산하는 방법에 대해 설명합니다.

        처음에 나는 그것이 애니메이션 스크롤을위한 플러그인을 사용하는 것이 가장 좋은 것입니다 말했다. 당신이 전환하지 않고 대상으로 이동하려는 경우 당신은, 그러나, 플러그인이 필요하지 않습니다. 그것에 대해 @ 제임스에 의해 답변을 참조하지만, 용기 주변에 테두리가있는 경우 당신이 정확하게 목표 위치를 계산합니다.

      • 12.무엇의 가치, 이것은 (컨테이너를 모르는 상태에서) 내가 스크롤와 DIV 내에서 될 수있는 일반적인 요소에 대한 그런 행동을 달성하기 위해 관리하는 방법입니다

        무엇의 가치, 이것은 (컨테이너를 모르는 상태에서) 내가 스크롤와 DIV 내에서 될 수있는 일반적인 요소에 대한 그런 행동을 달성하기 위해 관리하는 방법입니다

        그것은 대상 요소의 높이의 가짜 입력을 생성 한 다음에 초점을두고, 브라우저에 상관없이 당신이 얼마나 깊은 스크롤 계층 구조 내에서 나머지에 대해 알아서하지 않습니다. 매력처럼 작동합니다.

        var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();

      • 13.나는이 조합을했다. 나에 대한 작업. 하지만 클릭하면 하나의 문제에 직면 그 DIV의 크기가 너무 큰 그 시나리오에는 스크롤하지 다운이입니다 이동 특히 DIV.

        나는이 조합을했다. 나에 대한 작업. 하지만 클릭하면 하나의 문제에 직면 그 DIV의 크기가 너무 큰 그 시나리오에는 스크롤하지 다운이입니다 이동 특히 DIV.

         var scrollDownTo =$("#show_question_" + nQueId).position().top;
        console.log(scrollDownTo);
        $('#slider_light_box_container').animate({
            scrollTop: scrollDownTo
            }, 1000, function(){
        });

        }

      from https://stackoverflow.com/questions/2905867/how-to-scroll-to-specific-item-using-jquery by cc-by-sa and MIT license

      'JQUERY' 카테고리의 다른 글

      [JQUERY] 어떻게 jQuery를 사용하여 iframe이 상위 페이지에 액세스?  (0) 2020.10.20
      [JQUERY] jQuery를하고 CSS를 사용하여 성급 디스플레이에 숫자를 돌려  (0) 2020.10.20
      [JQUERY] 콜백에 더 많은 파라미터를 전달 JQUERY  (0) 2020.10.20
      [JQUERY] JQuery와 양식에 방지 페이지로드는 없음 표시 버튼으로 제출  (0) 2020.10.20
      [JQUERY] 어떻게 사용하지 않으려면 / 자바 스크립트에서 JSF 입력 필드를 사용 하시겠습니까?  (0) 2020.10.20
      ,

티스토리툴바