ハッシュタグのページ遷移で「戻るボタン」を設置したい

Question

前提・実現したいこと

アンケートページの作成しています。以下のページのようなページを作成したいです。
参考ＵＲＬ

上記と同じやり方を進めていたのですが、わからなくなってしまったので、
1）ハッシュを利用したページ遷移
2）戻るボタンを設置して前の質問に戻るを実装
2段階に分けて実装しています。

お知恵をお借りいただけないでしょうか。
jQueryとjavascriptは初心者のwebデザイナーです。よろしくお願いいたします。

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

ハッシュタグでの遷移は可能ですが、戻るボタンが動作しません。

該当のソースコード

<script type="text/javascript">
$(function(){
	$("#backButton").click(function(){
		window.history.back();
		return false;
	});
});
</script>  
<script>
$(function(){
		 $(".btn").on("click", function() {
			   $(this).closest("div").css("display","none");
			   id = $(this).attr("href");						   
			   $(id).addClass("positionFit").show("fast");
			});
});
</script>				

	<div id="wrapper">
			<div class="positionFit" id="q_01"><!--質問1-->
				<p class="question">【質問1.】ご職業を選択してください。</p>
				<ul class="answer clearfix">
					<li><a class="btn" href="#q_02_A">会社代表者<br />個人事業主</a></li>
					<li><a class="btn" href="#q_02_B">役員・従業員</a></li>
					<li><a class="btn" href="thanks.html">公務員</a></li>
					<li><a class="btn" href="thanks.html">その他</a></li>
				</ul>	
			</div>
			<div class="positionFit" id="q_02_A" style="display: none;">
				<p class="question">【質問2.】年齢を選択してください。</p>
				<ul class="answer clearfix">
					<li><a class="btn" href="#q_03_A">10代</a></li>
					<li><a class="btn" href="#q_03_B">20代</a></li>
				</ul>
				<input type="button" value="戻るボタン" id="backButton">
			</div>
	</div>

試したこと

<a>リンクと<input>ボタンと仕様を変えた。

補足情報（FW/ツールのバージョンなど）

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

を読ませてます。

追記情報

・「戻るボタン」押下した際、ページ遷移ではなく前の質問事項に戻るようにしたいです。（18/05/21）

Comments

[m.ts10806]

コードはコードブロック```で囲ってください（分からなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）また質問編集画面質問タイトル横にある「初心者アイコン」をご活用ください。もしJava要件があるのでしたらその辺りも具体的に記載された方が良いです（なるべく質問と関係ない事項は記載されない方が的確な回答がつきやすくなります）

[life_k]

ご指摘ありがとうございます。大変助かりました。

[m.ts10806]

jQueryもタグに追加し、質問本文の記載も調整してください（スペルミスがあります）

[m.ts10806]

これって「質問１」で選んだ選択肢の復帰　も必要ですよね

[m.ts10806]

あ、違うか・・・。フローも明確に提示されたほうが良いかと思います。

[m.ts10806]

再現確認のためにCSSもご提示いただけますか？

[m.ts10806]

ひとまず思ったところで回答してみました。

[life_k]

諸々お手数おかけしました。ありがとうございます。質問文のスペルミスですが、チェッカーにかけてみましたが検出されませんでした。どこの部分でしょうか。よろしくお願いいたします。

[m.ts10806]

質問本文に「jquary」というのがあります。正しくは「jQuery」です。

[m.ts10806]

チェッカーにかけるより、文節毎に自身で読む（できれば目ではなく口を動かす）と気づけます。

[life_k]

ソースだと勘違いしていました。ありがとうございます。修正します。

[m.ts10806]

一応「質問本文の記載も」と全体を示唆したつもりでしたが、そのものズバリを挙げた方がよかったですね。失礼しました。

Answer 1

今回は画面遷移ではないという頭にしないと迷宮から脱出できなくなると思います。

QA自体が動的かどうかで違ってはきますが、ひとまず「戻り先」って決まってますよね。

「戻るボタン」にback先の質問番号（idの非共通部分）をdata属性で埋め込んで、
あとは自身を非表示→戻り先を表示に切り替えるやりかたです。

提示のコードで戻るボタンにIDが振られていますが、同じIDは同じページ内に存在してはいけません。
今回質問はあくまでdivの表示非表示を切り替えているだけでhtmlのページ遷移が起きているわけではありません。
例えば質問IDなどを振ってもいいですが、それだとボタン毎にイベントを準備しなければならないので、あくまで汎用ボタンということでclassをつけてそのイベントを拾って、
役割はdata属性によって切り替えるとコードの汎用性が高まります。

 <input type="button" value="戻るボタン" class="back" data-back-qnum="01">

$(function(){
    $(".back").on("click",function(){
        back_hash = "q_"+$(this).data("back-qnum");
        location.href = location.pathname+"#"+back_hash;
       $(this).closest("div").css("display","none");
       $("#"+back_hash).addClass("positionFit").show("fast");

    });

     $(".btn").on("click", function() {
           $(this).closest("div").css("display","none");
           id = $(this).attr("href");                           
           $(id).addClass("positionFit").show("fast");
    });
});

「window.history.back();」は「ブラウザの戻るボタン」と同じ
なのですが、今回のように動的に表示非表示を切り替えているような部分がある場合、
そこは動いてくれません。（htmlをレンダリングしなおすわけではないので）
つまり、その部分はあくまで動的に、ブラウザバックではなくてプログラム上で制御してあげる必要があります。

「戻る先」が決まっているので、あとはきちんと質問IDとdata属性を連動させたHTMLを作れば、
これだけで戻るボタンが動くはずです。

蛇足：
幾つかJavaScriptの記述をなおしました。
$(function(){ は「htmlの読み込み終了時」という意味合いがあるので、イベント毎に囲う必要がありません。
冗長になってしまうので、特別に意味合いがわかれるときなど明示したいときを除いて1つにしてしまいましょう。

Comments

[m.ts10806]

あ、「location.pathname」はなくても良いですね。

[life_k]

ありがとうございます！動作の仕組みなど丁寧に教えていただきありがとうございます。
CSSは無しですが、早速実装してみました。
location.pathname　は無くてもよいということでしたので削って表記しましたが、
うまくページ遷移しませんでした。。こちらのコピペの仕方に問題がありますか。

一度こちらに貼り付けてもよろしいでしょうか。。。お手数おかけいたします。

[life_k]

こんにちは。こちらの実装にミスがありまして、jQueryを読み込む記述が無かったという超初心者ミステイクを犯しておりました。
ご提案いただいたもので挙動いたしました。
懇切丁寧にご教示いただきまして、何から何までありがとうございました。

[m.ts10806]

解決できたようで何よりです。

Answer 2

選択ボタンにハッシュタグをつけて質問事項を遷移し、なおかつ戻るボタンを設置してひとつ前に戻りたい。

ちょっと何言ってるか分かりません。
問題を切り分けて整理してはいかがですか。

ハッシュによる移動が出来ているそうなので、実現したいことは戻る機能の実装で間違いないですか。
でしたら以下のコードで実現できるはずです。
こちら で動作確認できます。

<button id="back">Back !</button>

const backButton = document.querySelector('button#back');

backButton.addEventListener('click', () => {
  history.back();
})

蛇足ですが、ご提示のコード中に戻るボタンが２つあるのは何故ですか？
あと、java じゃなくて javascript です。

Comments

[life_k]

ご回答ありがとうございます。諸々ご指摘ありがとうございます。

>ご提示のコード中に戻るボタンが２つあるのは何故
こちら<a>タグを使用したものと<input>で使用したものと試していたものが混在していました。
<a>のほうを削除いたしました。

ご提示いただいたソースコードで試してみましたが、動作しませんでした。
恐らく、こちらの実現したいことが不明瞭であることが原因だと思いますので、参考ＵＲＬを追記いたしました。

Answer 3

return false;

ではなくて

event.preventDefault();

ではどうでしょうか？

参考URL
https://iwb.jp/return-false-preventdefault-stoppropagation/

Comments

[life_k]

ご回答ありがとうございます。諸々ご指摘ありがとうございます。

ご提示いただいたソースコードで試してみましたが、動作しませんでした。
ご提示いただいたURLを確認しましたが、こちらの勉強不足もあり。。。
恐らく、こちらの実現したいことが不明瞭であることが原因だと思いますので、参考ＵＲＬを追記いたしました。

[stampdoor]

やりたいことが理解できたような気がします。
要はページを戻る、ではなく直前に選択した質問に戻るボタンを設定したいのではないでしょうか？
それではwindow.history.back();は意味ないですね。
window.history.back();は前のページのURLを呼び出して戻るものなので。
取り急ぎ上記の捉え方で合ってますでしょうか？
合っているようであれば質問文への追記をお願いします。
このままだと他の回答者も勘違いしちゃうと思います。

[life_k]

遅くなり申し訳ございません。

＞要はページを戻る、ではなく直前に選択した質問に戻るボタンを設定したいのではないでしょうか？
仰る通りです。

追記情報（18/05/21）を記載しました。
ご指摘ありがとうございます。