Настройка положения полосы прокрутки

У меня есть таблица внутри div (она переполняется, поэтому браузер отображает полосу прокрутки). Использование JavaScript, как перемещать маркер полосы прокрутки вдоль дорожки в позицию, соответствующую расположению строки в таблице?

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

Ответ 1

Если вы хотите перейти к jQuery, используйте таблицу scrollTop свойство.

Предположим, вы можете легко идентифицировать строку, которую хотите прокрутить, используя идентификатор, вместе с содержащим <div />. Используйте offsetTop элемента, который вы хотите прокрутить.

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

container.scrollTop = rowToScrollTo.offsetTop;

Ответ 2

Вы также можете использовать метод .scrollTop() jQuery:

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

Ответ 3

Использование JQuery:

'. scroll-table' - это имя класса, используемое для прокручиваемой части

1. Сначала перейдите в начальную позицию

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

2.Below line вычисляет разницу прокрутки между верхней строкой таблиц и строкой, к которой у нас есть прокрутка

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

Ответ 4

Если вы интересуетесь jQuery здесь, вы можете сделать это следующим образом:

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

Ответ 5

Вы можете использовать это:

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

Кроме того, вы можете проверить этот пример jsfiddle.