Đặt vị trí thanh cuộn

Question

Tôi có một bảng bên trong một div (nó tràn, do đó trình duyệt hiển thị thanh cuộn). Sử dụng JavaScript, làm cách nào để di chuyển thanh cuộn dọc theo tuyến đường đến vị trí tương ứng với vị trí của một hàng trong bảng?

+--------------------------------------+ 
|100        | | 
|101        | | 
|102        | | 
|103        | | 
|104        | | 
|105  This is a table that  |---| 
|106  has overflowed.  | - | <-- I want to move this using JavaScript, 
|107        |---|  so that a specific row # is visible. 
|108        | | 
|109        | | 
|110        | | 
|111        | | 
+--------------------------------------+ 

Answer 1

Nếu bạn muốn đi không jQuery way, sử dụng bảng chứa của scrollTop property.

Giả sử bạn có thể dễ dàng xác định hàng bạn muốn cuộn để sử dụng ID, cùng với số chứa <div />. Sử dụng offsetTop của phần tử bạn muốn cuộn đến.

var container = document.getElementById('myContainingDiv'); 
var rowToScrollTo = document.getElementById('myRow'); 

container.scrollTop = rowToScrollTo.offsetTop; 

Answer 2

Bạn cũng có thể sử dụng phương pháp .scrollTop() jQuery:

https://api.jquery.com/scrollTop/

Answer 3

Bạn có thể sử dụng này:

$('a').on('click', function(e){ 
    var t = this.id.substring(1); 
    e.preventDefault(); 
    var target= $(".section")[t] ; 
    var offset = $(target).offset(); 
    $('html, body').stop().animate({ 
    scrollTop: offset.top 
    }, 1000); 
}); 

Ngoài ra, bạn có thể kiểm tra example on jsfiddle này.

Answer 4

Sử dụng Jquery:

'.scroll-bảng' là tên lớp được sử dụng để cuộn thể phần

1.First đi đến vị trí ban đầu

$('.scroll-table').scrollTop(0); 

2 Dòng .Below sẽ tính toán độ lệch cuộn giữa vị trí trên cùng của bảng và hàng mà chúng tôi đã cuộn

$('.scroll-table').scrollTop($('#myrowid').position().top-$('.scroll-table').position().top); 

Answer 5

Nếu bạn quan tâm đến jQuery đây, bạn có thể làm điều đó như sau:

$(".tableClass tbody").scrollTop(0);