ページトップへ移動するリンクを書いてみるjQuery

より、ユーザーに便利に利用してもらおうとすると、気を使っていたとしても、htmlのソースは、かなりひどくなってくる事があります。

htmlは、言うまでもなくハイパーテキストですから、リンクは、ドキュメントに１００個ぐらい当たり前にあるわけです。
自ファイル内のリンクも、見出しや、脚注、ページトップへの戻りリンクなど、にぎわいます。

こういう部分は、何か工夫してもいいのではないだろうかと思ったりして、昨日、世迷言を書いてしまったので、ちょっと書きます。

以下のコードをhead内に貼り付けると

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
(function($){
   jQuery(function(){
        jQuery("h4").each(function(i){
			var num = "test" + i;
 	      	$(this).attr("id", num ).prepend('<a href="#">△</a>&nbsp;');
        });
	});
})(jQuery);
</script>

body内に以下のようにコードを書くと

<h4>test</h4>
<h4>test</h4>
<h4>test</h4>
<h4>test</h4>
<h4>test</h4>
<h4>test</h4>
<h4>test</h4>
<h4>test</h4>
<h4>test</h4>
<h4>test</h4>
<h4>test</h4>
<h4>test</h4>

こうなっちゃいます。

<h4 id="test0"><a href="#">△</a>&nbsp;test</h4>
<h4 id="test1"><a href="#">△</a>&nbsp;test</h4>
<h4 id="test2"><a href="#">△</a>&nbsp;test</h4>
<h4 id="test3"><a href="#">△</a>&nbsp;test</h4>
<h4 id="test4"><a href="#">△</a>&nbsp;test</h4>
<h4 id="test5"><a href="#">△</a>&nbsp;test</h4>
<h4 id="test6"><a href="#">△</a>&nbsp;test</h4>
<h4 id="test7"><a href="#">△</a>&nbsp;test</h4>
<h4 id="test8"><a href="#">△</a>&nbsp;test</h4>
<h4 id="test9"><a href="#">△</a>&nbsp;test</h4>
<h4 id="test10"><a href="#">△</a>&nbsp;test</h4>

<h4 id="test11"><a href="#">△</a>&nbsp;test</h4>