電子書籍の厳選無料作品が豊富！

JavaScriptから自ページリンクへ飛ばす方法？

解決済

  • 質問者：ciba
  • 質問日時：
  • 回答数：3件

行数の多い一覧で任意の行にスクロールするのが面倒で、
各行のキーになるような値の入ったドロップダウンリスト(以下DL)を設け、
それを選択して該当行を先頭に表示できないか考えています。

●画面イメージ

　[A |▼] ←DL

　|A|データA1|
　|A|データA2|
　|B|データB1|
　　　　:
　|Z|データZn|

DLには"A"～"Z"までが格納されていて、
例えば"Y"の選択でYの行を先頭に表示できればと思います。

そようなDLと、飛び先アンカー<A>を適宜埋め込んだhtmlを作成しました。
DL選択時のonchangeのJavaScriptで選択値に該当する<A>に飛ばす、
なんてできますでしょうか。

そもそもこんな方法はムリかもと思いつつ、お知恵があればと思い質問いたしました。
どうか宜しくお願い致します。

●html

<html>
　<head>
　　<SCRIPT language="Javascript">
　　　<!--
　　　function onChangeKeyList() {
　　　　var v = document.thisForm.keyList.value;

　　　　※ vにDLで選択した値を取り出す。
　　　　　 これを使って<a name="..."/>に何とか飛べないか？？？

　　　　return false;
　　　}
　　　-->
　　</SCRIPT>
　</head>

　<body>
　　<form>
　　　<select name="keyList" onchange="onChangeKeyList();">
　　　　<option value="A">A</option>
　　　　　　　　　　　 :
　　　　<option value="Z">Z</option>
　　　</select>

　　　<table>
　　　　<A name="A" /> ←アンカー
　　　　<tr>
　　　　　<td>A</td><td>データA1</td>
　　　　</tr>
　　　　<tr>
　　　　　<td>A</td><td>データA2</td>
　　　　</tr>

　　　　<A name="B" /> ←アンカー
　　　　<tr>
　　　　　<td>B</td><td>データB1</td>
　　　　</tr>
　　　　　　　 :
　　　</table>
　　</form>
　</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： BLUEPIXY
  • 回答日時：

location.hrefでの方法（＃２の方法も）うまくいかない場合、scrollToを使ってスクロールするというのはどうでしょうか


posは、実際にはマージンなんかを考慮する必要があるので、ブラウザによって微調整が必要かもしれません。
サンプル
<html>
<head>
<SCRIPT type="text/javascript">
<!--
function onChangeKeyList(list) {
var v = list.value;
var pos=document.getElementById(v).offsetTop;
window.scrollTo(0,pos);
//return false;
}
-->
</SCRIPT>
</head>
<body>
<form>
<select name="keyList" onchange="onChangeKeyList(this);">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
<option value="M">M</option>
<option value="N">N</option>
<option value="O">O</option>
<option value="P">P</option>
<option value="Q">Q</option>
<option value="R">R</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="U">U</option>
<option value="V">V</option>
<option value="W">W</option>
<option value="X">X</option>
<option value="Y">Y</option>
<option value="Z">Z</option>
</select>

<table border="1">
<tr id="A"><td>A</td><td>データA1</td></tr>
<tr> <td>A</td><td>データA2</td></tr>
<tr id="B"><td>B</td><td>データB1</td></tr>
<tr> <td>B</td><td>データB2</td></tr>
<tr id="C"><td>C</td><td>データC1</td></tr>
<tr> <td>C</td><td>データC2</td></tr>
<tr id="D"><td>D</td><td>データD1</td></tr>
<tr> <td>D</td><td>データD2</td></tr>
<tr id="E"><td>E</td><td>データE1</td></tr>
<tr> <td>E</td><td>データE2</td></tr>
<tr id="F"><td>F</td><td>データF1</td></tr>
<tr> <td>F</td><td>データF2</td></tr>
<tr id="G"><td>G</td><td>データG1</td></tr>
<tr> <td>G</td><td>データG2</td></tr>
<tr id="H"><td>H</td><td>データH1</td></tr>
<tr> <td>H</td><td>データH2</td></tr>
<tr id="I"><td>I</td><td>データI1</td></tr>
<tr> <td>I</td><td>データI2</td></tr>
<tr id="J"><td>J</td><td>データJ1</td></tr>
<tr> <td>J</td><td>データJ2</td></tr>
<tr id="K"><td>K</td><td>データK1</td></tr>
<tr> <td>K</td><td>データK2</td></tr>
<tr id="L"><td>L</td><td>データL1</td></tr>
<tr> <td>L</td><td>データL2</td></tr>
<tr id="M"><td>M</td><td>データM1</td></tr>
<tr> <td>M</td><td>データM2</td></tr>
<tr id="O"><td>O</td><td>データO1</td></tr>
<tr> <td>O</td><td>データO2</td></tr>
<tr id="P"><td>P</td><td>データP1</td></tr>
<tr> <td>P</td><td>データP2</td></tr>
<tr id="Q"><td>Q</td><td>データQ1</td></tr>
<tr> <td>Q</td><td>データQ2</td></tr>
<tr id="R"><td>R</td><td>データR1</td></tr>
<tr> <td>R</td><td>データR2</td></tr>
<tr id="S"><td>S</td><td>データS1</td></tr>
<tr> <td>S</td><td>データS2</td></tr>
<tr id="T"><td>T</td><td>データT1</td></tr>
<tr> <td>T</td><td>データT2</td></tr>
<tr id="U"><td>U</td><td>データU1</td></tr>
<tr> <td>U</td><td>データU2</td></tr>
<tr id="V"><td>V</td><td>データV1</td></tr>
<tr> <td>V</td><td>データV2</td></tr>
<tr id="W"><td>W</td><td>データW1</td></tr>
<tr> <td>W</td><td>データW2</td></tr>
<tr id="X"><td>X</td><td>データX1</td></tr>
<tr> <td>X</td><td>データX2</td></tr>
<tr id="Y"><td>Y</td><td>データY1</td></tr>
<tr> <td>Y</td><td>データY2</td></tr>
<tr id="Z"><td>Z</td><td>データZ1</td></tr>
<tr> <td>Z</td><td>データZ2</td></tr>
</table>
</form>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

BLUEPIXYさん、たびたびありがとうございます。
おかげさまで無事動作するようになりました。

実はscrollToを試してみたところ誤差が大きかったので、
どれだけ調整してやればよいか調べようとしたのですが、
その時にふと上に載せてくださったhtmlを見て気付きました。

僕のhtmlでは<tr>の前の必要な箇所に<A>を付けていたのですが、
上のサンプルでは<tr id="...">とされていますね。
この方法でうまく行くようになりました。

結局BLUEPIXYやsteel_grayに教えて頂いたNo.1やNo.2での回答に、
今回教えて頂いた<tr id="...">の組み合わせで動作しました。

テーブル中の<A>は動作しないのかな。

丁寧にサンプルを載せてくださったおかげで解決できました。
ありがとうございました。
お礼が遅くなってすみませんでした。

通報する
お礼日時：2005/05/09 11:03

No.2

  • 回答者： steel_gray
  • 回答日時：

ファイル名なしでもいけるんじゃなかったかな？


location.href="#"+v;
    • good
    • 0
    • 件
通報する
この回答へのお礼

steel_grayさん、アドバイスをどうもありがとうございます。

実はNo.1の回答を頂いた際、この方法でも試してみたのですが、
それでもうまくいかず悩んでいたのですが、
結局僕の作成したhtml中の飛び先の指定の仕方がマズかったのだと分かりました。

その部分を直してこのファイル名を指定しない方法でlocation.hrefし、
今では無事動作するようになりました。

どうもありがとうございました。
お礼が遅くなってすみません。

通報する
お礼日時：2005/05/09 11:08

No.1

  • 回答者： BLUEPIXY
  • 回答日時：

試してはいないですけど



location.href="self.html#"+v;

でいいんじゃないかと思います。

この回答への補足

BLUEPIXYさん、早速のアドバイスをありがとうございます。

今回の質問では、簡単のためhtmlとしましたが、
実際はtomcat+strutsの環境上のservletで用いるjspでして、
教えて頂いた

　location.href="self.html#"+v;

のうち、"self.html"に該当する部分をどう指定すればよいのか分かりません。

ちなみにlocation.hrefの値をalertを使って表示してみると、

　http://remoteServer:8080/myServlet/setupThisForm …

　　※ここで
　　　　remoteServer：サーブレットを構築しているサーバ名
　　　　myServlet:アプリケーションURI
　　　　setupThisForm.do：thisForm.jspを構築するaction

となっており、どうもこれを操作するのではないような気がしました。
documentオブジェクトを使うのかなと推測していろいろ調べていますが、まだ未解決です。

もし何かご存知でしたら、またご教授ください。
よろしくお願い致します。

補足日時：2005/05/06 17:46
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報