ヘッダーのリンクが機能しない時はここを疑え！

javascript

こんにちは、ゆうごろうです。

あなたはヘッダーのリンクを押しても画面遷移しないことに遭遇したことはないでしょうか？

私はこの前着手していた案件で、ヘッダーの実装をしていたところ、こんなことがありました。

クリン
クリン

あれ？リンクが機能しない
href属性とセクションのidは記述合っているんだけどなあ。。。

多分経験した人は少なくないと思います。

今回はそんな方に向けて私が体験したことをお話しできればと思います。

最低限の記述は確認できているか

ここまでは最低限記述にミスがないことが前提です。

まだ確認していない方は自身書いたHTMLをチェックしてみてください。

  • href属性に遷移してほしいセクションのid属性が記述されているか
  • セクションのid属性は正しいか

原因はjavascriptの記述にあり

まずは現状のコードを確認します。

<a href="#about" id="js-header__link" class="header__link">About</a>

<section id="about">
  <!-- セクション内容 -->
</section>

HTMLでこんな感じのコードを書いていると思います。至って普通のページ内リンクです。

しかし、このaタグをいざ押してみるとページがスクロールされません。

ソースをいろいろ確認していたら、javascriptの記述に原因があることがわかりました。

皆さんもこんなコード書く時ありますよね。

//ヘッダー内にあるaタグを取得する
const headerLinks = jQuery(".header__link");

//配列に格納
let pageLinks = [];
headerLinks.each(function () {
  pageLinks.push(jQuery(this));
});

pageLinks.forEach(function (link) {

  jQuery(link).on("click", function (e) {
    e.preventDefault();
    //ヘッダーのリンクがクリックされた時の処理
  });
});

勘のいい方ならお気づきかとおもいますが、このpreventDefaultが原因であることがわかりました。

このpreventDefaultってなんぞやというと、簡単に言えばイベントのデフォルトの動作をキャンセルして

自分でカスタムで動きを入れたい場合に使用するんですね。

デフォルト動作をキャンセルして自分でちゃんとした処理を入れよう！

ゆうごろう
ゆうごろう

しかし、なんとなくで使用してた人も少なくないのでしょうか？自分もこの問題が起きるまではあまり意識して使ってませんでした。。。

問題のpreventDefaultを削除してみるとしっかりページ遷移が動作しました。

javascriptのコードはバグに繋がりやすいから一行一行意識して書いてこうと思ったいい教訓でした。

まとめ

今回はaタグの画面遷移について、私が遭遇した問題について語りました。

意外と、なんとなく使っているpreventDefaultには注意が必要ということですよね。

私もコードについての理解が足りなかったということで、コードへの理解を深めていこうと思います。