Я понимаю, что это не отвечает прокрутке в контейнере, но люди находят это полезным так:

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

лучший плагин я нашел в этом суть.

это не плагин, но он делает работу одного, и он решил мои проблемы. к сожалению он работает только в Firefox. Не знаю, почему chrome не нравится/не хочет его запускать.

EDIT: тем временем мне удалось сделать это самому. Нет необходимости в плагинах. Проверьте мой суть:

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

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

можно использовать scrollIntoView() метод в javascript. просто дай id.scrollIntoView();

row_5.scrollIntoView();

Я сделал комбинацию того, что другие опубликовали. Его простой и гладкий

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

не уверен, почему никто не говорит очевидное, так как есть встроенный javascript scrollTo функция:

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

ссылка.

вопреки тому, что большинство людей здесь предлагают, я бы рекомендовал вам do использовать плагин, если вы хотите анимировать движение. Просто анимация scrollTop недостаточно для плавного пользовательского интерфейса. См.мой ответ здесь для рассуждения.

Я пробовал несколько плагинов, на протяжении многих лет, но в итоге написал сам. Вы можете дать ему вращение:С помощью jQuery.прокручиваемый. Используя это, действие прокрутки становится

$container.scrollTo( targetPosition );

но это еще не все. Нам тоже нужно зафиксировать положение цели. Расчет вы видите в других ответах,

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

в основном работает, но не совсем корректно. Он не обрабатывает границу контейнера прокрутки должным образом. Целевой элемент прокручивается слишком далеко вверх по размеру границы. вот демо.

следовательно, лучший способ рассчитать целевую позицию is

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

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

еще раз, посмотрите в демо чтобы увидеть его в действии.

для функции, которая возвращает целевую позицию и работает как для окон, так и для контейнеров прокрутки без окон, не стесняйтесь использовать в этом суть. В комментариях объясняется, как рассчитывается позиция.

в начале, я сказал, что было бы лучше использовать плагин для анимация скролл. Вам не нужен плагин, если вы хотите прыгать к цели без перехода. Вижу ответ @James для этого, но убедитесь, что вы правильно вычисляете целевую позицию, если есть граница вокруг контейнера.

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

для того чтобы принести элемент к центру контейнера.

демо на 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>

для чего это стоит, вот как мне удалось добиться такого поведения для общего элемента, который может быть внутри 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();