你可以在javascript中使用scrollIntoView()方法。 只需要给id.scrollIntoView();

例如

row_5.scrollIntoView();

你可以通过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>

我自己设法做到了。不需要任何插件。看看我的要点:

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

与这里大多数人的建议相反，如果你想让移动动画化，我建议你使用插件。仅仅对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的答案，但如果容器周围有边框，请确保正确计算目标位置。

我意识到这不能解决在容器中滚动的问题，但人们发现它很有用，所以:

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

滚动元素到容器的中心

将元素移到容器的中心。

在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;
}

它不是精确的中心，但在更大的元素上你不会认出它。