質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

別のページからの遷移後に表示されるURLからアンカータグ(#)を消したい

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 1,036

ayakyon

score 13

前提・実現したいこと

WordPressで各投稿ページを「http://○○.jp/カテゴリ/投稿.html」となるように設定しています。
コメントとトラックバックはタブで切り替えて表示するようにしました。コメント(#commentsBody)トラックバック(#trackbacksBody)にはそれぞれアンカーリンクでアクセスすることができます。
ページ内はスムーズスクロールで移動するようにプログラムしています。スムーズスクロールはhrefが“#”で始まるaタグをクリックすると発動し、実行後は[return false;]でaタグの機能を無効化するようにしました。
コメントとトラックバックをタブ切り替えにしていることから別ページから非表示になっているタブに
アクセスする際にエラーを起こさないよう、別のプログラムも設置しました。

最終的には、コメント/トラックバックにアクセスする際にもブラウザのURL欄にはアンカータグのついていない状態のアドレスを表示しておきたいと考えております。

投稿ページ内からはコメント/トラックバックに問題なくスムーズスクロールで移動し、移動後もURLにアンカータグが付くことはありません。希望通りの動作をしており特に問題は起きていません。

発生している問題・エラーメッセージ

問題は別のページからコメント/トラックバックに移動する時に発生します。
記事一覧ページやサイドバーからコメントへのリンクをクリックすると該当ページには遷移しますが、その後コメント/トラックバックへは移動してくれません。

該当のソースコード

jQuery(document).ready(function($){
    //URLアンカーを取得してタブ切り替え後に移動
    $('a.tabChack').click(function(e){
        //URLを変数に代入
        var urlName = $(this).attr("href");
        //aタグの機能を無効化
        e.preventDefault();
        //表示したいURLでページ遷移
        location.href = urlName.replace(/#.*/, "");
        //アンカータグを取得してハッシュを追加(urlHash[1]に収納)
        var urlHash = urlName.split('#');
        urlHash[1] = "#"+urlHash[1];
        //タブ切り替え後にスムーズスクロール移動
        var tab = document.getElementsByName( "tabNav" ) ;
        if(urlHash[1]=="commentsBody") tab[0].checked = true;
        else if(urlHash[1]=="trackbacksBody") tab[1].checked = true;
        var target = $(urlHash[1]).offset().top;
        $('html,body').animate({scrollTop : target}, 700, 'swing');
    });
});

試したこと

ページ遷移完了しないうちに次のプログラムを実行してしまっているため、タブ切り替え後のスムーズスクロールができないのではないかと思い、下記のプログラムも試してみたのですが、今度はページ遷移→コメント/トラックバックまでスムーズスクロール→画面再表示により一番上まで戻ってしまいます。

jQuery(document).ready(function($){
    var urlHash = location.hash;
    var tab = document.getElementsByName( "tabNav" ) ;
    if(urlHash){
        if(urlHash=="#commentsBody") tab[0].checked = true;
        else if(urlHash=="#trackbacksBody") tab[1].checked = true;
        var target = $(urlHash).offset().top;
        $('html,body').animate({scrollTop : target}, 700, 'swing');
        location.href = location.href.replace(/#.*/, "");
    }
});

何か解決方法はありませんでしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

自己解決できましたので、ご報告させて頂きます。

2番目に試したプログラムの一番下「location.href = location.href.replace(/#.*/, "");」の部分を「history.replaceState(null, null, location.pathname.split('/').pop());」と書き換えたところ、思い通りの動作となりました。

ページを再読み込みすることなく、ブラウザのアドレスバーを書き換える方法を見つけることが出来ましたので試してみました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る