Установка положения полосы прокрутки

Question

У меня есть таблица внутри 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                               |   |
+--------------------------------------+

Answer 1

Если вы хотите перейти не- jQuery , используйте свойство scrollTop содержащей таблицы .

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

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

container.scrollTop = rowToScrollTo.offsetTop;

Answer 2

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

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

Answer 3

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

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

1.Первый переход в исходное положение

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

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

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

Answer 4

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

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

Answer 5

Существует решение с использованием AngularJs.

  $document.scrollTopAnimated(50, 1000).then(function () {});

Первый параметр - это позиция.Вторая продолжительность анимации.

Answer 6

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

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