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