ヘッダー固定のスムーススクロールページにその他のページから該当開所に遷移した時にヘッダーの該当カテゴリーをアクティブにしたいです。

JSでわからないことがありましたので、質問させていただきます。

現在、ヘッダー固定のページ内スムーススクロールのサイト（以下、トップページと呼ぶ）を制作しているのですが、他のページも設けることになりました。
他のページからトップページの該当箇所に遷移する時にヘッダーのナビもアクティブにしたいのですが、その処理ができないでおります。

TOPページのみだけなら、ナビをアクティブにできるのですが、他のページから遷移した時のみアクティブになりません。

ソースコードを添付させていただきますので、どうやったら解決できるか、また同様の記事が書いてある参考サイトなどございましたら教えていただきたいです。
JSの詳しいかたご協力のほど、何卒よろしくお願い致します。

デモページ
URL削除しました。ご協力ありがとうございました！

▼▼▼▼▼HTML▼▼▼▼▼

	<header>
		<div class="inner clearfix">
		<h1><a href="./"><img src="assets/images/logo.png"></a></h1>
		<nav>
			<ul class="clearfix">
				<li><a href="#HOME" class="btn_act active">HOME</a></li>
				<li><a href="#value" class="btn_act">VALUE</a></li>
				<li><a href="#service" class="btn_act">SERVICE</a></li>
				<li><a href="#data" class="btn_act">DATA</a></li>
				<li><a href="#voice" class="btn_act">VOICE</a></li>
				<li><a href="#message" class="btn_act">MESSAGE</a></li>
				<li><a href="#entry" class="btn_act">ENTRY</a></li>
			</ul>
		</nav>
	</div>
	</header>
	<!--	/header	-->

		<div id="value" class="block">
　　　　　　　　　　省略
		</div>
		<div id="service" class="block">
　　　　　　　　　　省略
		</div>
		<div id="data" class="block">
　　　　　　　　　　省略
		</div>
		<div id="voice" class="block">
　　　　　　　　　　省略
		</div>
		<div id="message" class="block">
　　　　　　　　　　省略
		</div>
		<div id="entry" class="block">
　　　　　　　　　　省略
		</div>

▼▼▼▼▼JS▼▼▼▼▼

		$(function(){
	   $("nav li a.btn_act").click(function(){
	    var connectCont = $("nav li a.btn_act").index(this);
	    var showCont = connectCont+1;
		
	    $('nav li a').removeClass('active');
	    $(this).addClass('active');
	   });
		});

▼▼▼▼▼CSS▼▼▼▼▼

.active {
	text-decoration: underline;
}

x_x

2018/04/03 07:47

現状はどのようにして「アクティブ」にしていますか？　他のページから遷移したときと何が違うのでしょうか？

退会済みユーザー

2018/04/03 07:53 編集

コメントありがとうございます。現在は.activeというcssでアンダーラインをつけていて、トップページでナビゲーションを押すごとにアクティブが変わる仕様なのですが、他のページから例えばVALUEを押した時にJSの処理が足りないのかトップページのclassのactiveがバリューのところに移動しないので、それを解決したいのです。

x_x

2018/04/03 08:01

他のページから遷移する方法を示してもらえるでしょうか？

退会済みユーザー

2018/04/03 08:04

コメントありがとうございます。他のページにもTOPページと同じヘッダーがあり、他のページから例えばヘッダーのVALUEを押すと、TOPページに遷移し、スムーススクロールでVALUEのところに遷移する内容です。ただその時にTOPページのナビゲーションのVALUE部分がアクティブにならないので、その方法をご教授いただきたい次第でございます。

x_x

2018/04/03 08:20

うーん、どのように遷移しているのか、コードを出すことはできないのでしょうか？　問題が起こっているのですよね？

退会済みユーザー

2018/04/03 08:22

ちょっとテストサイトご準備しますので、お待ちくださいませ！

Lhankor_Mhy

2018/04/03 08:44

『他のページから遷移』というのは、具体的に言うと //example.com/#HOME へのリンクをクリックするとか、そういうことでしょうか？

退会済みユーザー

2018/04/03 08:44

デモページを追記しましたので、ご確認をお願い致します。VOICEページにだけいけるようになっておりますので、そちらのページからのナビの遷移をご確認くださいませ！

退会済みユーザー

2018/04/03 08:45

Lhankor_Mhy さま　そうですね！今デモページを追記しましたので、そちらを見ていただくとお伝えしたいことがわかるのかなと思います。ご確認のほどよろしくお願い致します！

Lhankor_Mhy

2018/04/03 08:57

当方の環境ですとむしろ、トップページにおいてスムーススクロールが動作してないです。

退会済みユーザー

2018/04/03 09:08

Lhankor_Mhyさまちょっと修正しましたがこれで直りましたかね？とりあえず他のページからTOPページに行った時に該当ナビがアクティブになっていれば良いです！

Lhankor_Mhy

2018/04/03 09:42

他ページからでもスムーススクロールをしているように見えましたが、どのような動作を想定されていますか？　一度ホームに戻るのが気に入らない、とかそういう感じですか？

退会済みユーザー

2018/04/03 09:46

TOPの該当箇所に遷移する時にスムーススクロールするのは正常な動きです。該当箇所に移動してもナビゲーションが該当箇所にアンダーラインがつかないことが問題です。例えば、VOICEページからTOPのVOICEに遷移する時に本来はナビはVOICEにアンダーラインがつくはずがHOMEにアンダーラインがついていることが問題ということです。それを直したいんです。

Lhankor_Mhy

2018/04/03 09:52

URLがリダイレクトしているような感じに見えたのですが、history.pushState とか使っていますか？

退会済みユーザー

2018/04/03 09:54

bundle.jsというので使っているっぽいですね。

Lhankor_Mhy

2018/04/03 09:54

https://ejointjp.github.io/smooziee.js/ これかな？

退会済みユーザー

2018/04/03 09:55

そうです！そちらを使用しています。

Lhankor_Mhy

2018/04/03 10:01

bundle.js は生コードじゃなくて webpack で生成したコードですよねー。 smooziee.js のドキュメントを見てきましたが、イベントとかなさそうなので、DOMContentLoaded イベント拾ってURLパラメータかアンカーのハッシュを取得して処理すればよさそうな気がしますが、どうでしょうか。

退会済みユーザー

2018/04/03 10:04

そこまでJSがわからないのであれなんですが、それで解決できるのでしたらJSの添削もしていただけると非常に助かります泣

x_x

2018/04/04 02:21

見てみましたが、エラーが発生しているようですね。

退会済みユーザー

2018/04/04 02:33

x_xさま昨日試行錯誤してエラーになったままの状態でしたので、初期段階に戻しましたので再度ご確認いただけますと幸いです！宜しくお願い致します！

行動規範の内容に同意します

回答3件

ベストアンサー

JavaScript
1$(function() {
2  if (location.search.length > 10) {
3    $('nav li a.btn_act').removeClass('active');
4    $('nav li a.btn_act[href="#' + location.search.substring(11) + '"]').addClass('active');
5  }
6});

決め打ちでsubstring(11)などと書いていますが、splitなどを使って解析したほうがいいかもしれません。

投稿2018/04/04 09:28

x_x

総合スコア13749

退会済みユーザー

2018/04/04 20:51

ありがとうございます！こちらのJSを追記したら理想の動作になりました！あと追加で対応したいことが出てしまったのですが、トップページでスクロールしながら、該当する領域に入ったらナビも同様にナビもアクティブが移動する仕様にしたいのですが、こちらってわかったりしますか？例えばトップページで、マウスでスクロールして行った時にVOICEの領域に入ったら、ナビゲーションもVOICEがアクティブにしたいです！

x_x

2018/04/05 00:21

Intersection Observerで検索してみてください。その場合、ほかの方法でのクラス変更は不要になるかもしれません。

退会済みユーザー

2018/04/05 11:39

ありがとうございます！いろいろとやってみます！解決したかったことが教えてもらった方法でできたのでベストアンサーとさせていただきます！ありがとうございました！

行動規範の内容に同意します

http://uxmilk.jp/9205
このページ参考になりませんか？
ハッシュを取得して、ハッシュと同じhref属性を持つメニュー要素を
アクティブ化すれば良いだけではないでしょうか？（まず他の要素をremoveClass('active')するのをお忘れなく）。
トップページではハッシュが無いので、デフォルト状態のHOMEがアクティブですね。
この流れをscriptで書くだけで良いと思います。

ハッシュ付きでページ移動してから、該当箇所へスクロールさせたいのであれば
それはまた別の問題で、これまでに何度か議論されているので調べてみて下さい。
これとか
https://teratail.com/questions/98715

投稿2018/04/04 08:51

shaak

総合スコア607

退会済みユーザー

2018/04/05 11:40

ありがとうございます！こちらも参考になりました！これから結構発生しそうな問題なので、じっくり実験してみたいと思います！ありがとうございました！

行動規範の内容に同意します

js
1$(function(){
2  let scroll_id = location.search.split('?')[1].split('&').reduce(　(hash,　str)　=>　{
3    let temp = str.split('=');
4    hash[temp[0]] = temp[1];
5    return hash;
6  },　{}　).scroll_id;
7  var connectCont = $("nav li a.btn_act").index( $(`nav li a.btn_act[href=#${scroll_id}]`) );
8  var showCont = connectCont+1;
9
10  $('nav li a').removeClass('active');
11  $(this).addClass('active');
12  //ここまでを追加
13
14  $("nav li a.btn_act").click(function(){
15    //...
16  });
17});

動くかどうかわかんないですが。
pushStateとのタイミングの問題がありそう。

コメントを受けて追記

js
1$(function(){
2  var connectCont = $("nav li a.btn_act").index( $(`nav li a.btn_act[href="${location.hash}"]`) );
3  var showCont = connectCont+1;
4
5  $('nav li a').removeClass('active');
6  $($(`nav li a.btn_act[href="${location.hash}"]`)).addClass('active');
7//ここまでを追記