スクロール付きのDIV内で指定した要素までスクロールさせるjQuery

2017年5月5日

スクロール付きのDIV内で指定した要素までスクロールさせるjQuery

ボタンをクリックしたらスクロール付きのDIV内で指定した要素までスクロールさせる動作をjQueryで実装してみました。ポイントはDIVに指定するCSSで、「position:relative」の指定が無いと思った位置にスクロールしないため、注意が必要です。

jQuery参考

$(".scroll_position a").click(function(){
  var target = "#" + $(this).html();
  var th = $(target).position();
  var sh = $(".scroll_div").scrollTop();
  var pos = th.top + sh;
  $(".scroll_div").animate({scrollTop: pos},"slow", "swing");
});

CSS参考

.scroll_div{
height: 100px;
overflow: auto;
position: relative;
}

動作サンプル

list1｜list2｜list3｜list4｜list5

リスト1

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
リスト2

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
リスト3

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
リスト4

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
リスト5

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。