세로 스크롤 막대가있는 큰 테이블이 있습니다. jQuery / Javascript를 사용하여이 테이블의 특정 줄로 스크롤하고 싶습니다.

이 작업을 수행하는 기본 제공 방법이 있습니까?

div {
    width: 100px;
    height: 70px;
    border: 1px solid blue;
    overflow: auto;
}

<div>
    <table id="my_table">
        <tr id='row_1'><td>1</td></tr>
        <tr id='row_2'><td>2</td></tr>
        <tr id='row_3'><td>3</td></tr>
        <tr id='row_4'><td>4</td></tr>
        <tr id='row_5'><td>5</td></tr>
        <tr id='row_6'><td>6</td></tr>
        <tr id='row_7'><td>7</td></tr>
        <tr id='row_8'><td>8</td></tr>
        <tr id='row_9'><td>9</td></tr>
    </table>
</div>

스 니펫 확장

답변

간단하다. 플러그인이 필요하지 않습니다 .

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 .

답변

컨테이너의 스크롤에 응답하지 않지만 사람들은 유용하다고 생각합니다.

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

문서 스크롤러 중 하나에있을 수 있고 어떤 것을 결정하기가 어렵 기 때문에 html과 body를 모두 선택합니다. 최신 브라우저의 경우 $(document.body).

또는 페이지 상단으로 이동하려면

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

또는 애니메이션없이 :

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

또는…

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

답변

나는 플러그인을 사용하는 Kevin과 다른 사람들에게 동의합니다.

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

답변

나는 그것을 스스로 관리했다. 플러그인이 필요 없습니다. 내 요점을 확인하십시오 .

// 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);
});

답변

scrollIntoView()자바 스크립트에서 메소드를 사용할 수 있습니다 . 그냥 줘id.scrollIntoView();

예를 들어

row_5.scrollIntoView();

답변

jQuery scrollTo 플러그인 플러그인을 사용할 수 있습니다 .

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

답변

컨테이너 중심으로 요소 스크롤

컨테이너 중앙에 요소를 가져옵니다.

코덱에 대한 데모

JS

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

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

HTML

<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>

CSS

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

중심에는 정확하지 않지만 더 큰 요소에서는 인식 할 수 없습니다.