ページ内リンクを外部からアクセスされた場合でも綺麗に表示させたいです。

Question

初めて質問させていただきます。

１つのhtmlを作成し、ページ内リンクを設定したnavを作成しました。
このままでは長いページになってしまうので、デフォルトではコンテンツを非表示にし、navをクリックすると、そのid(#〇〇)のみがスクロールされながら表示されるページにしてます。
この場合、ページ内リンクであればclickイベントを利用してうまくいくのですが、外部ブログやQRコードのような外部から直接アクセスしたい時にうまく動きません。

hashを使えば良いという記事を見つけ色々試しているのですがうまくいかず、お力をお借りできたら幸いです。

html

//ナビゲーション
<nav>
 <ul>
  <li><a href="index.html">ホーム</a></li>
  <li><a href="news.html">NEWS</a></li>
  <li><a href="#tab1">サービス</a></li>
  <li><a href="#tab2">FAQ</a></li>
  <li><a href="#tab3">ダウンロード</a></li>
  <li><a href="#tab4">会社概要</a></li>
  <li><a href="#tab5">お問い合わせ</a></li>
 </ul>
</nav>

//コンテンツ
<div id="contents">
 <div id="tab1">
    //サービスの内容
 </div>
 <div id="tab2">
    //FAQの内容
 </div>
 <div id="tab3">
    //ダウンロードの内容
 </div>
 <div id="tab4">
    //会社概要の内容
 </div>
 <div id="tab5">
    //お問い合わせの内容
 </div>

</div>

jQueryに記載

//表示させたいコンテンツの記載
$(function(){
  $('#contents > div').hide();
  $("nav ul a").click(function(){
    $("#contents > div").hide();
    $($(this).attr("href")).show();
    $(".current").removeClass("current");
    $(this).addClass("current");
    return false;
  });
});


//スムーズスクロールの記載
$(function(){
  $("nav ul a").click(function(){

  var target = $($(this).attr("href")).offset().top;

  target　-=　70;

  $("html,body").animate({scrollTop: target},500);
    return false;
  });
});

ページ内リンクだけであればこれで問題なく動くのですが、外部リンクから直接#tab3のダウンロードページや#tab5のお問い合わせに飛ばしたい時はどのように記載をしたら良いでしょうか。
類似の回答を見つけたのですが、今回のケースは#contentsを一度非表示にしているのでコピペさせていただいても、
var urlHash = location.hash;
で#〇○を取得し、記載のjsにつなげてみてもうまく動きません。

別々のhtmlにしてしまえば良いのでは？
と言われてしまえばそれまでなのですが（汗）
お手数をおかけしますがよろしくお願いします。

Answer 1

コンテンツの表示処理のトリガーを現在はクリックにしているため、クリック時に処理が行われると思うのですが、「DOMが構築されたら実行される。」をトリガーにしてみてはどうでしょうか？その後はhashを取得し、hashの有無で条件分岐し、hashがあればコンテンツを表示する処理を行う。

$(function() {
　  // ↓ここにも処理を書いてみてはどうでしょうか　ロードされた時(正確にはDOMが構築された時)の処理
　  var hash = location.hash;
    if(hash) {
      $(hash).show();
    }
    // ↑ここまで

　  //　↓クリック時の処理
    $("nav ul a").click(function(){
      $("#contents > div").hide();
      $($(this).attr("href")).show();
      $(".current").removeClass("current");
      $(this).addClass("current");
      return false;
    });
});

---

追記
下記のコードに置き換えれば多分期待する動作になると思います。

//表示させたいコンテンツの記載
$(function(){
    $('#contents > div').hide();
    var hash = location.hash;
    if(hash) {
        $(hash).show();
        $(".current").removeClass("current");
        $(`nav ul a[href='${hash}']`).addClass("current");
    }
    $("nav ul a").click(function(){
        $("#contents > div").hide();
        $($(this).attr("href")).show();
        $(".current").removeClass("current");
        $(this).addClass("current");
        return false;
    });
});

Comments

[laboog0628]

早速お返事いただきありがとうございます。
今まで試してなかった記述場所ですので、今夜早速試してみたいと思います。
またご報告させていただければと思いますのでどうぞよろしくお願いいたします！

[george]

はーい！頑張ってください！

[laboog0628]

こんばんは。
早速試してみました。
結論から申し上げると、うまくいきませんでした。
他のJQueryが効かなくなるのと、html全体が表示されてしまいます。
取得したhashから、navのa要素をクリックさせるトリガーを発動させたり出来るのでしょうか。（うまく表現が出来ず申し訳ないです）

[george]

取得したhashから、navのa要素をクリックさせるトリガーを発動させたり出来るのでしょうか。
↑出来ると思いますがあまり綺麗な仕方ではないと思います。

質問なのですが、回答で記述したコードをそのままコピペしましたでしょうか？
回答で記述したコードを元に質問者様が編集して使って貰うつもりだったのですが、勘違いさせてしまっていたら申し訳ございません。

[laboog0628]

私の理解が乏しくてお恥ずかしい限りです。
送っていただいたリンクに書いてあった記事を参考にさせていただき、

$(document).ready(function(){
var hash = location.hash;
if(hash) {
$(hash).show();
}
$("nav ul a").click(function(){
$("#contents > div").hide();
$($(this).attr("href")).show();
$(".current").removeClass("current");
$(this).addClass("current");
return false;
});
});
こんな感じで書いてみました。

[laboog0628]

追記です。
今まで記載していたクリックされたときのコードを残していたので試しに消してみたところ、#要素の部分まで無事表示されるところまで確認できました。ありがとうございます！
しかしながら、コンテンツ全体が表示されてしまいます。

[george]

出来れば現状の画像を載せていただけると助かります。

[george]

回答を編集（追記）しました。
ご確認ください。

[laboog0628]

わかりにくくて申し訳ございません。
上記のコードを以下のように書き換えたらうまくいきました。

(document).ready(function(){
var hash = location.hash;
$("#contents > div").hide(); //ここを追加
if(hash) {
$(hash).show();

}
$("nav ul a").click(function(){
$("#contents > div").hide();
$($(this).attr("href")).show();
$(".current").removeClass("current");
$(this).addClass("current");
return false;
});
});

構文としてはなんか変な気がしますが・・・汗
あとはこれからスムーズスクロールをscrollTopで組めばなんとかなりそうな予感がします！
ちょっとやってみます！
アドバイスありがとうございました！
またご報告させていただきますね！

[laboog0628]

追記回答を今確認いたしました！

おっしゃる通り、私の希望の通りになりました。
本当にありがとうございます！
あとはスムーズスクロールをつけるだけですので自分でやってみます！
親身に相談に乗っていただき本当にありがとうございました！

[george]

引用元：https://on-ze.com/archives/1851
引用：ここで使われる「$(function(){〜});」は略式で、展開すると $(document).ready(){〜}); と同じ意味になります。
引用の内容のように
「$(function(){〜});」 = 「 $(document).ready(){〜});」
のようなので「 $(document).ready(){〜});」ではなく「$(function(){〜});」 を使う方が良いと思います。
「$(function(){〜});」 を使うのが一般的な気がしますので。

[laboog0628]

ありがとうございます。
まだまだ勉強が足りないなと反省しております。
これからもコーディングを楽しみながら勉強していきたいと思います。
この度はありがとうございました！

[george]

説明不足な点があり、申し訳ございませんでした。
少しでも力になれたのであれば幸いです。
これからも頑張ってください。

[laboog0628]

今回の課題を参考にしながら、スムーズスクロールも今記述分に手を加えて、まさにこの１週間悩んでいたことが全て解決いたしました。
本当にありがとうございました！
これからも精進してまいります！