У меня большой стол с вертикальной полосой прокрутки. Я хотел бы прокрутить до определенной строки в этой таблице, используя 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)

Я согласен с Кевином и другими, использовать плагин для этого бессмысленно.

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()метод в JavaScript. просто дайid.scrollIntoView();

Например

row_5.scrollIntoView();

Вы можете использовать плагин jQuery scrollTo :

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

Прокрутите элемент к центру контейнера

Подвести элемент к центру контейнера.

ДЕМО на CODEPEN

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функция javascript :

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 слишком велик, чтобы Scennerio не прокручивал этот конкретный div.

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

        }