ウェブ

トップへ戻るボタンをクリックした際にURLにハッシュ「#」がついてしまう【解決方法】

ハッシュ

トップに戻るボタンをクリックするとURLの末尾に#がついてしまう現象を#を付けない処理方法について解説します。

右下にあるボタンをクリックするとページのトップに戻る動作をしますが、その時に末尾に#がついてしまっています。

「#」が付く
「#」が付く

なぜこのようになるかというと、アンカーリンクが<a href=”#”>なっている為、クリックするとリンク後のURLへイベント処理してしまうためです。

「#」を付けない方法
「#」を付けない方法

#を付けないようにするためには、URLに「#」をつけない「イベント処理の中断」の記述が必要になります。

HTMLを確認

まずは、ブラウザの「検証」でトップに戻るボタンのidを確認します。

検証で確認
検証で確認

HTMLコード

当サイトのトップに戻るボタンコード

<div id="page-top" class="c-page-top" style="display: block;">
	<a href="#" class="totop" aria-label="top-button">
		<i class="jic jin-ifont-arrowtop"></i>
	</a>
</div>

idpage-topと確認できたのでトップペ戻るボタンのスクリプトを確認しにいきます。

JSを確認

スクリプトコードをidで検索します。

テーマによってはコメントがされている場合があるので「トップ」・「戻る」・「ボタン」などを入力して検索をすると見つけやすい。

トップに戻るボタンスクリプト
トップに戻るボタンスクリプト

スクリプトを見つけたら「イベント処理の中断」の記述return false;をチェック処理の最後に追加するだけで完了です。

//イベント処理の中断
return false;
イベント処理の中断
イベント処理の中断

スクリプトコード

実際のコード

//トップペ戻るボタン
(function ($) {
  $(window).scroll(function () {
    var now = $(window).scrollTop();
    //最上部から現在位置までの距離(now)が600以上
    if (now > 600) {
      //[#page-top]をゆっくりフェードインする
      $("#page-top").fadeIn("slow");
      //それ以外だったらフェードアウトする
    } else {
      $("#page-top").fadeOut("slow");
    }
  });
  //ボタン(id:move-page-top)のクリックイベント
  $(document).on("click", ".totop", function () {
    //ページトップへ移動する
    $("body,html").animate(
      {
        scrollTop: 0,
      },
      200
    );
    //トップペ戻るボタンクリック後、URLに「#」をつけない「イベント処理の中断」
    return false;
  });
})(jQuery);

ファイルを更新で「#」が付かない仕様になっているはずです。

returnについて

returnを使うと、関数内で処理をした結果を「戻り値」として返すことができ、returnを使わなかった場合は処理を行ったらそのまま終了となります。

return falseについて

return falseは、ブラウザ側で行う処理を中断することを意味しており、今回のようにリンク処理中断やフォームなどのイベント処理に使用されます。