Q&A
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
すでにfanctionを組み込んだボタンにもう一つ機能を付けて画面のスクロールを動かしたいです。
人物紹介のような形で、指定した人のボタンを押すと画像の切り替えおよび、その人の詳細が書かれているスクロールを動かしたいのですが、どのようにしたらよいでしょうか？？お願いします。
以下コードです
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>HTML課題</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="all"> <header> <div style="float: left">HTML課題</div> <div style="text-align: right">ログイン:h</div> </header> <div class="index"> <h1><a name="目次">目次</a></h1> <ul> <li><a href="#目次">目次</a></li> <li><a href="#自己紹介">自己紹介</a></li> <li><a href="#社員一覧">社員一覧</a></li> </ul> </div> <div class="self"> <h2><a name="introduction">自己紹介</a></h2> <div class="scr">/このクラスがスクロール部分です/ <div> <p>名前 a</p> <p>カナ a</p> <p>生年月日</p> <p>一言</p> </div> <div> <p>名前 b</p> <p>カナ b</p> <p>生年月日</p> <p>一言</p> </div> <div> <p>名前 c</p> <p>カナ c</p> <p>生年月日</p> <p>一言</p> </div> <div> <p>名前 d</p> <p>カナ d</p> <p>生年月日</p> <p>一言</p> </div> <div> <p>名前 e</p> <p>カナ e</p> <p>生年月日</p> <p>一言</p> </div> <div> <p>名前 f</p> <p>カナ f</p> <p>生年月日</p> <p>一言</p> </div> </div> <div class="picture"> <img id="neko" src="neko0.jpg" alt="neko" name="area1"> </div> </div> <div class="employee"> <h2><a name="社員一覧">社員一覧</a></h2> <table> <tr> <th>NO</th> <th>名前</th> <th>役職</th> <th>詳細</th> </tr> <tr> <td>1</td> <td>a</td> <td>執行役員</td> <td> <input type="button" onclick='foo(0);' value="ボタン"> </td> </tr> <tr> <td>2</td> <td>b</td> <td>課長</td> <td> <input type="button" onclick='foo(1);' value="ボタン"> </td> </tr> <tr> <td>3</td> <td>c</td> <td>課長</td> <td><input type="button" onclick='foo(2);' value="ボタン"></td> </tr> <tr> <td>4</td> <td>d</td> <td></td> <td><input type="button" onclick='foo(3);' value="ボタン"></td> </tr> <tr> <td>5</td> <td>e</td> <td></td> <td><input type="button" onclick='foo(4);'value="ボタン"></td> </tr> <tr> <td>6</td> <td>f</td> <td></td> <td><input type="button" onclick='foo(5);'value="ボタン"></td> </tr> <tr> <td>7</td> <td></td> <td></td> <td></td> </tr> <tr> <td>8</td> <td></td> <td></td> <td></td> </tr> <tr> <td>9</td> <td></td> <td></td> <td></td> </tr> <tr> <td>10</td> <td></td> <td></td> <td></td> </tr> </table> </div> </div> <script src="kadai.js"></script> </body> </html> 外部スクリプト function foo(i) { var images = [ "neko0.jpg", "neko1.jpg", "neko2.jpg","neko3.jpg","neko4.jpg","neko5.jpg"]; document.area1.src = images[i]; }
ありがとうございます。修正いたしました。
回答1件
0
ベストアンサー
ページ内リンクということであれば、以下のように行えると思いますが、いかがでしょうか？
HTML
1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"/> 5 <title>HTML課題</title> 6 <link rel="stylesheet" type="text/css" href="style.css"/> 7</head> 8<body> 9<div class="all"> 10 <header> 11 <div style="float: left">HTML課題</div> 12 <div style="text-align: right">ログイン:h</div> 13 </header> 14 <div class="index"> 15 <h1><a name="目次">目次</a></h1> 16 <ul> 17 <li><a href="#目次">目次</a></li> 18 <li><a href="#自己紹介">自己紹介</a></li> 19 <li><a href="#社員一覧">社員一覧</a></li> 20 </ul> 21 </div> 22 <div class="self"> 23 <h2><a name="introduction">自己紹介</a></h2> 24 <div class="scr">/このクラスがスクロール部分です/ 25 <div id="0"> 26 <p>名前 a</p> 27 <p>カナ a</p> 28 <p>生年月日</p> 29 <p>一言</p> 30 </div> 31 <div id="1"> 32 <p>名前 b</p> 33 <p>カナ b</p> 34 <p>生年月日</p> 35 <p>一言</p> 36 </div> 37 <div id="2"> 38 <p>名前 c</p> 39 <p>カナ c</p> 40 <p>生年月日</p> 41 <p>一言</p> 42 </div> 43 <div id="3"> 44 <p>名前 d</p> 45 <p>カナ d</p> 46 <p>生年月日</p> 47 <p>一言</p> 48 </div> 49 <div id="4"> 50 <p>名前 e</p> 51 <p>カナ e</p> 52 <p>生年月日</p> 53 <p>一言</p> 54 </div> 55 <div id="5"> 56 <p>名前 f</p> 57 <p>カナ f</p> 58 <p>生年月日</p> 59 <p>一言</p> 60 </div> 61 </div> 62 <div class="picture"> 63 <img id="neko" src="neko0.jpg" alt="neko" name="area1"> 64 </div> 65 </div> 66 <div class="employee"> 67 <h2><a name="社員一覧">社員一覧</a></h2> 68 <table> 69 <tr> 70 <th>NO</th> 71 <th>名前</th> 72 <th>役職</th> 73 <th>詳細</th> 74 </tr> 75 <tr> 76 <td>1</td> 77 <td>a</td> 78 <td>執行役員</td> 79 <td> 80 <input type="button" onclick='foo(0);' value="ボタン"> 81 </td> 82 </tr> 83 <tr> 84 <td>2</td> 85 <td>b</td> 86 <td>課長</td> 87 <td> 88 <input type="button" onclick='foo(1);' value="ボタン"> 89 </td> 90 </tr> 91 <tr> 92 <td>3</td> 93 <td>c</td> 94 <td>課長</td> 95 <td><input type="button" onclick='foo(2);' value="ボタン"></td> 96 </tr> 97 <tr> 98 <td>4</td> 99 <td>d</td> 100 <td></td> 101 <td><input type="button" onclick='foo(3);' value="ボタン"></td> 102 </tr> 103 <tr> 104 <td>5</td> 105 <td>e</td> 106 <td></td> 107 <td><input type="button" onclick='foo(4);' value="ボタン"></td> 108 </tr> 109 <tr> 110 <td>6</td> 111 <td>f</td> 112 <td></td> 113 <td><input type="button" onclick='foo(5);' value="ボタン"></td> 114 </tr> 115 <tr> 116 <td>7</td> 117 <td></td> 118 <td></td> 119 <td></td> 120 </tr> 121 <tr> 122 <td>8</td> 123 <td></td> 124 <td></td> 125 <td></td> 126 </tr> 127 <tr> 128 <td>9</td> 129 <td></td> 130 <td></td> 131 <td></td> 132 </tr> 133 <tr> 134 <td>10</td> 135 <td></td> 136 <td></td> 137 <td></td> 138 </tr> 139 </table> 140 </div> 141</div> 142<script> 143 function foo(i) { 144 var images = ["neko0.jpg", "neko1.jpg", "neko2.jpg", "neko3.jpg", "neko4.jpg", "neko5.jpg"]; 145 document.area1.src = images[i]; 146 location.href = location.href.split('#')[0] + "#" + i; 147 } 148</script> 149</body> 150</html>
投稿2017/04/11 14:14
編集2017/04/11 14:34
総合スコア14731
それぞれにidふって関数の中に入れてみたのですけど、スクロール画面は動かないですね・・・
自分でもいろいろ考えて見ます！
動作確認が不十分でした。失礼しました。回答文のコードを修正しましたので、もう一度確認してみていただけませんか？
ありがとうございました。動きました！
split('#')[0] + "#" + i;の理解があいまいです。
id要素に引数を文字列で関連付けるといった意味合いでしょうか？？
そのような解釈で間違いないかと思います。ページ内リンクについてはこちら(http://www.tagindex.com/html_tag/link/a_id.html)を読むとより理解できると思います。
ありがとうございます！拝見いたします。
昨日はありがとうございました。
仮に
// 要素の位置を取得する
var element = document.getElementById() ;
var rect = element.getBoundingClientRect();
var positionX = rect.left + window.pageXOffset ; // 要素のX座標
var positionY = rect.top + window.pageYOffset ; // 要素のY座標
// 要素の位置にスクロールさせる
window.scrollTo( positionX, positionY ) ;
と書きたい場合どのようにすればいいのでしょうか？
あなたの回答
tips
プレビュー
