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

動作サンプル

list1list2list3list4list5

  • リスト1

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

  • リスト2

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

  • リスト3

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

  • リスト4

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

  • リスト5

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

,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です