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