overflowをautoにした要素のスクロール位置を変更するには、scrollTop scrollLeftを使います

サンプルのソースは以下のとおり。

html/CSS

<div id="scroll-test" style="width: 250px; height: 250px;overflow:auto;">
	<div style="width: 600px; background:#eee;">
		<div>これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。</div>
		...
		<div>これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。</div>
	</div>
</div>

<p>
	<a onclick="scrollLinkTest01();return false;">右から200pxの位置に移動する</a>
	<a onclick="scrollLinkTest02();return false;">上から100pxの位置に移動する</a>
	<a onclick="scrollLinkTest03();return false;">左端に移動する</a>
	<a onclick="scrollLinkTest04();return false;">上部に移動する</a>
</p>

JavaScript

function scrollLinkTest01() {
	document.getElementById("scroll-test").scrollLeft = 200;
}

function scrollLinkTest02() {
	document.getElementById("scroll-test").scrollTop = 100;
}

function scrollLinkTest03() {
	document.getElementById("scroll-test").scrollLeft = 0;
}

function scrollLinkTest04() {
	document.getElementById("scroll-test").scrollTop = 0;
}

jQueryの場合

JavaScript

function scrollLinkTest01() {
	$("#scroll-test").scrollLeft(200);
}

function scrollLinkTest02() {
	$("#scroll-test").scrollTop(100);
}

function scrollLinkTest03() {
	$("#scroll-test").scrollLeft(0);
}

function scrollLinkTest04() {
	$("#scroll-test").scrollTop(0);
}

ちなみにアニメーション移動させる場合

function scrollLinkTest01() {
	$("#scroll-test").animate({
		scrollLeft: 200
	});
}

function scrollLinkTest02() {
	$("#scroll-test").animate({
		scrollTop: 100
	});
}

function scrollLinkTest03() {
	$("#scroll-test").animate({
		scrollLeft: 0
	});
}

function scrollLinkTest04() {
	$("#scroll-test").animate({
		scrollTop: 0
	});
}