FAQ(よくある質問)などで一覧から詳細に移動するとき、記事の位置によっては「どこに移動したの?」って思うことがあります。
そんなときにはJavaScriptでマークを付けるとわかりやすいです。
心理的なことで話すと、画面の中央にある一覧をクリックするときには視点はその位置にありますが、移動した先で見てもらいたいものは
画面の上部にきます。このような移動では視点が付いていけずに迷ってしまうのではないでしょうか?
特に同じページでの移動は表示が早いということもあるでしょう。
例
- 動作について
- 一覧をクリックするとどうなりますか?
- ページ上部へをクリックするとどうなりますか?
- ほかのアンカーをクリックするとどうなりますか?
- JavaScriptについて
- JavaScriptの読み方は?
- Javaとは違うのですか?
- JavaScriptが無効のブラウザだとどうなりますか?
- アンカーについて
- アンカーにID属性は必要ですか?
- アンカーにNAME属性は必要ですか?
<script type='text/javascript'>
<!--//
var ancid="";
function returnAnc(){
if(ancid!=""){
document.getElementById(ancid).innerHTML="";
ancid="";
}
}
function changeAnc(targ){
returnAnc();
document.getElementById(targ).innerHTML='<img src="./img/faqanc/mk_star.gif" width="15" height="14" />';
ancid=targ;
}
//-->
</script>
<dl>
<dt>動作について</dt>
<dd><a href="#faq1_1" onClick="changeAnc('faq1_1');">一覧をクリックするとどうなりますか?</a></dd>
</dl>
<dl>
<dt>動作について</dt>
<dd>
<dl>
<dt><a id="faq1_1" name="faq1_1"></a>一覧をクリックするとどうなりますか?</dt>
<dd>移動先にマークが付きます。</dd>
</dl>
</dd>
<dd><a href="#top" onClick="returnAnc();">ページ上部へ</a></dd>
</dl>
<!--//
var ancid="";
function returnAnc(){
if(ancid!=""){
document.getElementById(ancid).innerHTML="";
ancid="";
}
}
function changeAnc(targ){
returnAnc();
document.getElementById(targ).innerHTML='<img src="./img/faqanc/mk_star.gif" width="15" height="14" />';
ancid=targ;
}
//-->
</script>
<dl>
<dt>動作について</dt>
<dd><a href="#faq1_1" onClick="changeAnc('faq1_1');">一覧をクリックするとどうなりますか?</a></dd>
</dl>
<dl>
<dt>動作について</dt>
<dd>
<dl>
<dt><a id="faq1_1" name="faq1_1"></a>一覧をクリックするとどうなりますか?</dt>
<dd>移動先にマークが付きます。</dd>
</dl>
</dd>
<dd><a href="#top" onClick="returnAnc();">ページ上部へ</a></dd>
</dl>