세로 스크롤 막대가있는 큰 테이블이 있습니다. 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;
}

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

jQuery 와 JavaScript로 스크롤 할 수 있습니다. jQuery와이 JavaScript 코드가 필요합니다.

$(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);
  });
});

$(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);
  });
});

#pane1 {
  background: #000;
  width: 400px;
  height: 400px;
}

#pane2 {
  background: #ff0000;
  width: 400px;
  height: 400px;
}

#pane3 {
  background: #ccc;
  width: 400px;
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li>
    <a href="#pane1" class=" js-scroll-to-id">Item 1</a>
  </li>
  <li>
    <a href="#pane2" class="js-scroll-to-id">Item 2</a>
  </li>
  <li>
    <a href="#pane3" class=" js-scroll-to-id">Item 3</a>
  </li>
</ul>
<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>
<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#pane3" class="js-scroll-to-id">Item 1</a>
  </li>
  <li>
    <a href="#pane2" class="js-scroll-to-id">Item 2</a>
  </li>
  <li>
    <a href="#pane1" class="js-scroll-to-id">Item 3</a>
  </li>
</ul>

다른 사람들이 게시 한 내용을 조합하여 사용했습니다. 간단하고 부드럽게

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

내장 자바 스크립트 scrollTo함수 가 있기 때문에 아무도 분명하지 않은 이유를 모르겠습니다 .

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

참조 .

여기에 대부분의 사람들이 제안하는 것과는 반대로, 나는 당신이 권 해드립니다 할 당신이 움직임을 애니메이션을 적용 할 경우 플러그인을 사용합니다. 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;

다시 데모를보십시오 를 살펴보고 실제로 작동하는지 확인하십시오.

대상 위치를 반환하고 창 및 비 창문 스크롤 컨테이너 모두에서 작동하는 함수의 경우이 요점을 자유롭게 사용 하십시오. . 여기에있는 의견은 위치 계산 방법을 설명합니다.

처음에는 애니메이션 스크롤을 위해 플러그인을 사용하는 것이 가장 좋겠다고 말했습니다 . 그러나 전환없이 대상으로 이동하려면 플러그인이 필요하지 않습니다. @James 의 답변을 참조하십시오. 그러나 컨테이너 주위에 테두리가 있으면 대상 위치를 올바르게 계산하십시오.

가치가있는 것은 이것이 스크롤을 사용하여 컨테이너를 알 수없는 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();

나는이 조합을했다. 나를 위해 그 일. 그러나 클릭 이동이 div 크기가 너무 커서 scenerio 스크롤 이이 특정 div로 내려 가지 않으면 한 가지 문제가 발생합니다.

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

        }