divを親としてスクロールの位置を指定した要素へ
スクロールさせたくサンプルソースを作成
ボタンクリックでテーブルの指定要素へ
スクロールします
サンプルソース
コピペでOK！
CSSはBootstrapを使用
全文
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
<style> /** スクロール用のdiv*/ .div-scroll { overflow-y: scroll; height: 177px; position: relative; border: solid; border-width: 1px; } /** テーブルのデザイン */ .tbl-itme { border-collapse: separate; border-spacing: 10px 40px; } </style> <script type="text/javascript"> $(function() { var DIV_SCROLL_ID = "div-item"; $("#btnItem1").click(function() { setScroll(DIV_SCROLL_ID ,"txt_01"); }); $("#btnItem2").click(function() { setScroll(DIV_SCROLL_ID ,"txt_02"); }); $("#btnItem3").click(function() { setScroll(DIV_SCROLL_ID ,"txt_03"); }); $("#btnItem4").click(function() { setScroll(DIV_SCROLL_ID ,"txt_04"); }); $("#btnItem5").click(function() { setScroll(DIV_SCROLL_ID ,"txt_05"); }); $("#btnItem6").click(function() { setScroll(DIV_SCROLL_ID ,"txt_06"); }); $("#btnItem7").click(function() { setScroll(DIV_SCROLL_ID ,"txt_07"); }); }); /** * 設定したIdへスクロール位置を合わせる * @param divScrollId スクロールしているdivのid * @param itemId スクロール位置を合わせたいオブジェクトのid */ function setScroll(divScrollId, itemId) { // スクロール位置を合わせたいオブジェクトのIDから位置を取得 var targetPosition = $("#" + itemId).position(); // スクロールDIVの水平方向のスクロール位置取得 var divScrollTop = $("#" + divScrollId).scrollTop(); // スクロール位置を計算して設定 var position = targetPosition.top + divScrollTop; $("#" + divScrollId).animate({ scrollTop : position }, "slow", "swing"); } </script> <div> <button type="button" id="btnItem1" class="btn btn-primary">項目1へ</button> <button type="button" id="btnItem2" class="btn btn-secondary">項目2へ</button> <button type="button" id="btnItem3" class="btn btn-success">項目3へ</button> <button type="button" id="btnItem4" class="btn btn-danger">項目4へ</button> <button type="button" id="btnItem5" class="btn btn-warning">項目5へ</button> <button type="button" id="btnItem6" class="btn btn-info">項目6へ</button> <button type="button" id="btnItem7" class="btn btn-dark">項目7へ</button> </div> <div id="div-item" class="div-scroll"> <table class="tbl-itme"> <thead> <tr> <td>項目1</td> <td><input type="text" id="txt_01" ></td> </tr> <tr> <td>項目2</td> <td><input type="text" id="txt_02" ></td> </tr> <tr> <td>項目3</td> <td><input type="text" id="txt_03" ></td> </tr> <tr> <td>項目4</td> <td><input type="text" id="txt_04" ></td> </tr> <tr> <td>項目5</td> <td><input type="text" id="txt_05" ></td> </tr> <tr> <td>項目6</td> <td><input type="text" id="txt_06" ></td> </tr> <tr> <td>項目7</td> <td><input type="text" id="txt_07" ></td> </tr> </thead> </table> <br/><br/><br/><br/><br/> </div> |
実行結果の確認
デモページで、実際の動きを確認できます
初心者向けおすすめ書籍をご紹介！
jQueryの基本的なところから学びたい人向け
リンク
プログラミングを学んだけど、実際Webシステムで
どうやって開発するの？という方向けの書籍です
どうやって開発するの？という方向けの書籍です
リンク
コメント