Tôi có một cái bàn lớn với thanh cuộn dọc. Tôi muốn cuộn đến một dòng cụ thể trong bảng này bằng jQuery / Javascript.

Có phương pháp tích hợp để làm điều này?

Dưới đây là một ví dụ nhỏ để chơi với.

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>

Chết một cách đơn giản. Không có plugin cần thiết .

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

Dưới đây là một ví dụ làm việc .

Tài liệu choscrollTop .

Tôi nhận ra điều này không trả lời cuộn trong một container nhưng mọi người đang thấy nó hữu ích vì vậy:

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

Chúng tôi chọn cả html và body vì trình cuộn tài liệu có thể nằm trên một trong hai và thật khó để xác định đó. Đối với các trình duyệt hiện đại, bạn có thể thoát khỏi $(document.body).

Hoặc, để đi đến đầu trang:

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

Hoặc không có hình ảnh động:

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

HOẶC LÀ...

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

Tôi đồng ý với Kevin và những người khác, sử dụng một plugin cho việc này là vô nghĩa.

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

Tôi quản lý để làm điều đó bản thân mình. Không cần bất kỳ plugin nào. Kiểm tra ý chính của tôi :

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

Bạn có thể sử dụng scrollIntoView()phương pháp trong javascript. chỉ choid.scrollIntoView();

Ví dụ

row_5.scrollIntoView();

Bạn có thể sử dụng plugin jQuery scrollTo plugin:

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

Di chuyển phần tử đến trung tâm của container

Để đưa các yếu tố vào trung tâm của container.

DEMO trên CODEPEN

Mã não

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

Nó không chính xác với trung tâm nhưng bạn sẽ không nhận ra nó trên các yếu tố lớn hơn lớn hơn.

Bạn có thể cuộn bằng jQuery và JavaScript Chỉ cần hai yếu tố jQuery và mã JavaScript này:

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

Tôi đã làm một sự kết hợp của những gì người khác đã đăng. Nó đơn giản và trơn tru

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

Không chắc chắn tại sao không ai nói điều hiển nhiên, vì có một scrollTohàm javascript tích hợp:

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

Tham khảo .

Trái với những gì hầu hết mọi người ở đây đang đề xuất, tôi khuyên bạn nên sử dụng một plugin nếu bạn muốn làm động tác di chuyển. Chỉ hoạt hình scrollTop là không đủ cho trải nghiệm người dùng mượt mà. Xem câu trả lời của tôi ở đây cho lý do.

Tôi đã thử một số plugin trong những năm qua, nhưng cuối cùng đã tự viết một cái. Bạn có thể muốn cung cấp cho nó một spin: jQuery.scrollable . Sử dụng đó, hành động cuộn trở thành

$container.scrollTo( targetPosition );

Nhưng đó không phải là tất cả. Chúng ta cũng cần sửa vị trí mục tiêu. Tính toán bạn thấy trong các câu trả lời khác,

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

chủ yếu là hoạt động nhưng không hoàn toàn chính xác. Nó không xử lý đường viền của thùng chứa cuộn đúng cách. Phần tử đích được cuộn lên quá xa, theo kích thước của đường viền. Đây là một bản demo.

Do đó, một cách tốt hơn để tính toán vị trí mục tiêu là

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

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

Một lần nữa, hãy xem bản demo để thấy nó hoạt động.

Đối với một chức năng trả về vị trí đích và hoạt động cho cả vùng chứa cuộn cửa sổ và không phải cửa sổ, hãy sử dụng ý chính này . Các ý kiến ​​trong đó giải thích cách tính vị trí.

Ban đầu, tôi đã nói rằng tốt nhất nên sử dụng một plugin để cuộn hoạt hình . Tuy nhiên, bạn không cần một plugin, nếu bạn muốn nhảy đến mục tiêu mà không cần chuyển đổi. Xem câu trả lời của @James cho điều đó, nhưng hãy đảm bảo bạn tính toán chính xác vị trí mục tiêu nếu có đường viền xung quanh container.

Đối với giá trị của nó, đây là cách tôi quản lý để đạt được hành vi như vậy đối với một yếu tố chung có thể ở bên trong DIV bằng cách cuộn (mà không cần biết container)

Nó tạo ra một đầu vào giả về chiều cao của phần tử đích, sau đó đặt trọng tâm vào nó và trình duyệt sẽ quan tâm đến phần còn lại cho dù bạn có ở sâu trong hệ thống phân cấp có thể cuộn của bạn. Hoạt động như một lá bùa.

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

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

Tôi đã làm sự kết hợp này. nó làm việc cho tôi nhưng phải đối mặt với một vấn đề nếu nhấp di chuyển kích thước div quá lớn mà cuộn scenerio không xuống div cụ thể này.

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

        }