ボタンをクリックしたらスクロール付きの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; }
動作サンプル
-
リスト1
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
-
リスト2
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
-
リスト3
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
-
リスト4
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
-
リスト5
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。