webページでボタンを押された場合に画面遷移し、かつ指定した位置にスクロールするようにしたい。

Question

すみません、初心者です。
フレームワークのためソースを見せることが出来ません。

それでは質問します。

例えば、申込を行うページがあった場合に、
プラン入力＞情報入力＞情報確認＞完了
と画面遷移するページを作成するとします。

そして「情報確認」で、
プラン入力または情報入力で誤った記述をした場合に、
情報確認画面から修正ボタンを押下すると、
画面遷移し、誤って入力された場所にスクロールするように、
画面を作成したいです。

いま作成できている段階では画面遷移のみで、
意図した場所にスクロールすることが出来ず困っています。

申し訳ございません。質問にお答えします。 フレームワークは楽々フレームワークⅡです。
誤った場合というのは、名前を間違って入力した場合などのことを指します

Comments

[退会済みユーザー]

フレームワークは何なのか書けませんか？　タグに JavaScript と HTML しかないですが、それだけでは誤ってるかどうかの判断すらできないと思うのですが・・・

[papinianus]

2点質問への追記をお願いします(1)誤ったとはどういう状況ですか？本人が誤ったと思って修正したいときですか？それとも日本の郵便番号に英字を書いた状態ですか？(2)複数の誤りがあったらどうするのでしょうか？
フレームワークもそうですが、せめてサーバサイドの言語だけでも。

[uedadaiti]

申し訳ございません。質問にお答えします。
フレームワークは楽々フレームワークⅡです。
誤った場合というのは、名前を間違って入力した場合などのことを指します。

[papinianus]

サポートに聞こう。javaタグつけてください

[yambejp]

スクロールって本当に必要な仕様か検討が必要かも。
なにを基準にどこからどこにスクロールするのでしょうか？
ハッシュでダイレクトに飛んでは行けないのでしょうか？

Answer 1

すでに遷移できているということなのでスクロールだけ。
フラグメント識別子を使うか、
https://www.kanzaki.com/docs/html/htminfo12.html

JavaScriptで scrollTopを設定したり、scrollIntoView() メソッドを呼ぶことでスクロールできます。
一例

document.addEventListener('DOMContentLoaded', function(event) {
  document.querySelector('input:invalid').scrollIntoView({ behavior: 'smooth' });
});

https://developer.mozilla.org/ja/docs/Web/API/Element/scrollTop

https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView

Comments

[uedadaiti]

以下のような形で実現しました。
//提案画面から修正ボタンを押下した場合に画面スクロールを実行する
String p_btn_typ = g_ssp.g_gp.getParam("どのボタンから遷移したか調べる");
StringBuilder p_js = new StringBuilder();
p_js.append("\n if ("").append(p_btn_typ).append(""どのボタンから遷移したか調べる == '遷移したボタンと同じか') {");
p_js.append("\n var position = $('[id = html部分のどのidか]').offset().top - $('[id = grpheader]').height();");
p_js.append("\n $('body,html').animate({scrollTop:position}, 1000, 'swing');");
p_js.append("\n }");

画面遷移した場合、
どのボタンから遷移したかを調べ、
idと等しければ指定した位置まで遷移するという
処理にすることで質問の条件は完了するうことが出来ました。
参考になるURLなどを提供して頂きありがとうございました。