18-解决方案_在一个元素中滚动
6.4.3 解决方案：在一个元素中滚动
如果目标元素在一个滚动容器中，可以使用 positon 方法确定目标元素与容器的相对位置，将其添加到容器的当前滚动位置，然后使用 scrollTop 方法滚动容器，使元素可见。注意，滚动容器必须使用 position: relative 、 position: absolute 或者 position: fixed 定位，这种方法才能正常工作。
例如，考虑如下标记样式， #foo 的大小不足以同时显示两个段落。
<head>
<style>
#foo {
width:300px;
padding:10px;
height:20px;
border:1px solid black;
overflow:auto;
position:relative;
}
</style>
</head>
<body>
<input type="button" id="bar" value="Click to scroll to last paragraph" />
<input type="button" id="bam" value="Click to scroll to last paragraph with
animation" />
<div id="foo">
<p>This is the first paragraph. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.</p>
<p>This is the second paragraph. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.</p>
<!-- several more paragraphs -->
</div>
</body>
滚动 #foo 显示最后一个段落很简单：
var $foo = jQuery('#foo');
$('#bar').click(function() {
var lastParagraphPosition = jQuery('#foo p:last').position();
var scrollPosition = $foo.scrollTop() + lastParagraphPosition.top;
$foo.scrollTop(scrollPosition);
});
在上述两个例子中，滚动都是立即发生的——这很有效，但是不一定具有吸引力。动画方法能动态改变元素的 scrollTop 属性，因此可以很轻松地创建过渡动画。下面的代码为滚动容器添加动画效果：
var $foo = jQuery('#foo');
$('#bam').click(function() {
var lastParagraphPosition = jQuery('#foo p:last').position();
var scrollPosition = $foo.scrollTop() + lastParagraphPosition.top;
jQuery('#foo').animate({scrollTop: scrollPosition}, 300);
});
注意
jQuery还包含一个
scrollLeft方法，它的表现与scrollTop类似。