この記事のターゲット
・フロントエンドむつかしい
・JavaScript実質初めて触った
・ページ内リンクでぬるぬる動くあれがやりたい
・やりたいのになんか動かない
注意書き
知っている方からすれば当たり前じゃんという内容でしかありません。
結論を言えば動かなかった理由は私の勉強不足でしたので、困っていない方はブラウザバックしていただいてオッケーです。
事の経緯
私はこれまでphpやruby、perlなどを触る機会が多く、あまりhtmlやcss、javascriptに触れる機会がありませんでした。
しかしこれではいかんと一念発起、フロントエンドの技術も触っていかねばと思い、webポートフォリオを作り上げることを目標に静的ページの作成を始めたわけでありました。
問題発生
見よう見まねでbootstrapなんかを使い何とか1ページ、見れるものができたところでページ内リンクを貼りたくなりました。
スーッと動いていい感じのところまで行ってくれるのいいですよね。
という事でパパッとググってhtmlの随所にこんなタグを入れ込みました。
<a name="home"></ a>
...はい。
察した方はもうここから先を読む必要はないです。
ここまでお付き合いいただきありがとうございました。
さて、このタグを入れた事で無事ページ内リンクが動くようになりました。やったね。
ところがどっこい、あのぬるぬる動く感じを出すにはJavaScript（jQuery）を使う必要があると。
あいやわかりました。
毛も生えていない素人ですが勉強のためにやっている事です。使ってみましょう。
これまたパパッと調べて以下のようなスクリプトでいけるという事でしたので書きました。
$(function() {
$('a[href^="#"]').click(function() {
var speed = 500;
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$('html, body').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
ここではこのコードの説明は特にしません。
詳しく説明してくださっているサイトがいくつもあるのでそっちみてください。
さて、このスクリプトを書いていざスムーススクロール！
と思いきやブラウザからエラーが返されました。はて。
Uncaught TypeError: Cannot read property 'top' of undefined
どうやらoffset()のtopが取得できていないっぽい。
何でやろかとググってみると、jQueryのバージョンによっては記述が厳しくなったとか、ブラウザが古いからだとか、$(window).load(function(){})の中で実行とか、色々出てきましたが一向に解決せず。
原因解明
3時間かかりました。ええ。
諦めてその日は寝ましたとも。
簡潔に原因を述べると、javascript側ではなくhtml側にミスがありました。
ページ内リンクのために以下のようなタグを入れ込みましたが、これが間違い。
<a name="home"></ a>
正しくは
<div id="home"></ div>
でした。（別にdivじゃなくてもいい。要はname属性ではなくid属性で指定するべきという話。）
どうもHTML5ではページ内リンクにname属性を使うのは非推奨（廃止？）になったらしいです。（一体何周遅れな知識なのか...）
まとめ
完全に勉強不足でした。
あと調べ方が悪かった。
エラーメッセージだけで検索しているとこの原因はなかなか出てこなかったので...
結局のところ、最初に見つけたページ内リンクの貼り方のページが古かったわけですね。
今後は複数のサイトを見て正しい書き方をきちんと考察していきます。