你可以使用jQuery scrollTo插件插件:

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

死很简单。不需要插件。

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的文档。

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

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

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

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

不知道为什么没有人说显而易见的，因为在javascript中有一个内置的scrollTo函数:

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

参考。

我同意Kevin和其他人的观点，使用插件是没有意义的。

window.scrollTo(0, $("#element").offset().top);

我结合了其他人发布的内容。它简单流畅

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

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

例如

row_5.scrollIntoView();

为了它的价值，这就是我如何设法实现这种行为的一般元素，可以在一个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();

滚动元素到容器的中心

将元素移到容器的中心。

< a href = " https://codepen。io/anon/pen/xVOJvR" rel="nofollow noreferrer">DEMO on CODEPEN . io/anon/pen/xVOJvR" rel="nofollow noreferrer">DEMO on 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
});
}

超文本标记语言

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

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


}