【Rails/HTML】アクション実行後にページ最上部にスクロールせず、実行前の位置にリロードされるようにしたい。

WEBシステムを開発中なのですが、アクションボタンを実行した後に、毎回必ずページ最上部にまでスクロールされてしまう現象を無くしたいと考えています。
（縦長のシートに上から順に項目を入れていく形式であるため）

要するに、アクションボタンン実行前のスクロール位置と実行後のスクロール位置を一致させたいです。

知恵を貸していただけないでしょうか。

{試したこと}
ヘッダにjavascriptにてスクロール位置を記憶するスクリプトを仕込みましたがうまく動きません。

【コントローラファイル】（抜粋）

def set_inp
    @sheet = Sheet.find_by(id: params[:id])
    #パラメータ(アクション名を取得)
    @column_name = params[:act]
    @content = params[:cnt_inp]
    @operation = Operation.find_by(op_code: @column_name)
    #内容を更新
    @sheet.public_send("#{@column_name}=", @content)
    op = @operation.name

    if @sheet.save
      flash[:notice] = "#{op}を更新しました"
      redirect_to("/sheets/#{@sheet.id}/edit")
    else
      render("sheets/#{@sheet.id}/edit")
    end
  end

【UI】

【ビューファイル】

<head>
<script type="text/javascript">

var scrollpoint = 0 //スクロール位置を格納するグローバル変数

document.addEventListener('turbolinks:before-visit', function() { //遷移する前に動くイベント
  get_scroll_point(); //呼び出す関数(下記)
});

document.addEventListener('turbolinks:load', function() { //遷移後に動くイベント
  restore_scroll();
});

// スクロール位置を復元
function get_scroll_point() {
  var tableScrollXPoint = document.getElementById("maintable").scrollTop; //テーブルに振ってあったid(maintable)のスクロール位置を取得
  scrollpoint = tableScrollXPoint  //スクロール位置をグローバル変数に格納(これは↑と1行にまとめても良さげですね)
}

function restore_scroll() {
  document.getElementById("maintable").scrollTop = scrollpoint;  //遷移前のスクロール位置をテーブルに設定し、復元する
}
</script>

</head>


<div class="main posts-show">
  <div class="container">
    <div class="posts-show-item">
      <div class="duty_date">
        <%=@sheet.duty_date%>
      </div>
      <div class="post-user-name">
        作成者:<%= link_to(@sheet.creator_name, "/user/#{@sheet.creator_code}") %>
      </div>

          <div class="i_header">
              共通設定：
              <%= link_to(@sheet.i_name, "/user/#{@sheet.i_code}") %>
          </div>
          <table>
          <!--ヘッダ行-->
            <tr>
              <th>項目名</th>
              <th>設定値</th>
              <th>変更</th>
            </tr>
<!--月次のみ追加STT-->
<%if @sheet.monthly_flg=="1"%>
          <!--行開始_電子帳票スプール保管日時-->
          <tr>
          <!--アクション名の宣言-->  
          <%@column_name = "spl_set_d"%>
            <!--項目-->
            <td class="name_cell">
              <%= 
                operation = Operation.find_by(op_code: @column_name)
                operation.name
              %>
            </td>
            <!--時刻表示-->
            <td class="time_cell">
              <%if @sheet.send(@column_name)%>
                <%= @sheet.send(@column_name).to_s %>
              <%end%>
            </td>
            <!--入力欄-->
            <td class="cont_cell">
              <%= form_tag("/sheets/set_inp/#{@sheet.id}/#{@column_name}") do %>
                <input type="date" name="cnt_inp" class="cnt_area" value="<%=@sheet.send(@column_name)%>">
                <input type="submit" value="更新">
              <% end %>
            </td>
          </tr>
          <!--行終了-->

          <!--行開始_電子帳票ログデータ削除日時-->
          <tr>
          <!--アクション名の宣言-->  
          <%@column_name = "dlog_set_d"%>
            <!--項目-->
            <td class="name_cell">
              <%= 
                operation = Operation.find_by(op_code: @column_name)
                operation.name
              %>
            </td>
            <!--時刻表示-->
            <td class="time_cell">
              <%if @sheet.send(@column_name)%>
                <%= @sheet.send(@column_name).to_s %>
              <%end%>
            </td>
            <!--入力欄-->
            <td class="cont_cell">
              <%= form_tag("/sheets/set_inp/#{@sheet.id}/#{@column_name}") do %>
                <input type="date" name="cnt_inp" class="cnt_area" value="<%=@sheet.send(@column_name)%>">
                <input type="submit" value="更新">
              <% end %>
            </td>
          </tr>
          <!--行終了-->

          <!--行開始_システム保管日時-->
          <tr>
          <!--アクション名の宣言-->  
          <%@column_name = "sys_sav_d"%>
            <!--項目-->
            <td class="name_cell">
              <%= 
                operation = Operation.find_by(op_code: @column_name)
                operation.name
              %>
            </td>
            <!--時刻表示-->
            <td class="time_cell">
              <%if @sheet.send(@column_name)%>
                <%= @sheet.send(@column_name).to_s %>
              <%end%>
            </td>
            <!--入力欄-->
            <td class="cont_cell">
              <%= form_tag("/sheets/set_inp/#{@sheet.id}/#{@column_name}") do %>
                <input type="date" name="cnt_inp" class="cnt_area" value="<%=@sheet.send(@column_name)%>">
                <input type="submit" value="更新">
              <% end %>
            </td>
          </tr>
          <!--行終了-->
<%end%>
<!--月次のみ追加END-->

<!--月次&月次翌日のみ追加STT-->
<%if @sheet.mnext_flg=="1" || @sheet.monthly_flg=="1"%>
          <!--行開始_情報課作業内容-->
          <tr>
          <!--アクション名の宣言-->  
          <%@column_name = "iset_cont"%>
            <!--項目-->
            <td class="name_cell">
              <%= 
                operation = Operation.find_by(op_code: @column_name)
                operation.name
              %>
            </td>
            <!--時刻表示-->
            <td class="time_cell">
              <%if @sheet.send(@column_name)%>
                <%= @sheet.send(@column_name).to_s %>
              <%end%>
            </td>
            <!--入力欄-->
            <td class="cont_cell">
              <%= form_tag("/sheets/set_inp/#{@sheet.id}/#{@column_name}") do %>
                <textarea name="cnt_inp"><%= @sheet.send(@column_name) %></textarea>
                <input type="submit" value="更新">
              <% end %>
            </td>
          </tr>
          <!--行終了-->
<%end%>
<!--月次&月次翌日のみ追加END-->

<!--臨時のみ追加STT-->
<%if @sheet.temp_flg=="1"%>

          <!--行開始_生産臨時設定区分-->
          <!--アクション名の宣言-->  
          <%@column_name = "ptmp_flg"%>
            <!--項目-->
            <td class="name_cell">
              <%= 
                operation = Operation.find_by(op_code: @column_name)
                operation.name
              %>
            </td>
            <!--時刻表示-->
            <td class="time_cell">
                <%if @sheet.send(@column_name).to_s == "1"%>
                  有り
                <%else%>
                  無し
                <%end%>
            </td>
            <!--入力欄-->
            <td class="cont_cell">
              <%= form_tag("/sheets/set_inp/#{@sheet.id}/#{@column_name}") do %>
                <div class = "radiolb">
                  <input type="radio" name="cnt_inp" value="0" checked>無し
                  <br>
                  <input type="radio" name="cnt_inp" value="1" >有り
                </div>
                <input type="submit" value="更新">
            <%end%>
            </td>
          </tr>
          <!--行終了-->

        <!--行開始_販売臨時設定区分-->
          <!--アクション名の宣言-->  
          <%@column_name = "gtmp_flg"%>
            <!--項目-->
            <td class="name_cell">
              <%= 
                operation = Operation.find_by(op_code: @column_name)
                operation.name
              %>
            </td>
            <!--時刻表示-->
            <td class="time_cell">
              <%if @sheet.send(@column_name).to_s == "1"%>
                  有り
                <%else%>
                  無し
                <%end%>
            </td>
            <!--入力欄-->
            <td class="cont_cell">
              <%= form_tag("/sheets/set_inp/#{@sheet.id}/#{@column_name}") do %>
                <div class = "radiolb">
                  <input type="radio" name="cnt_inp" value="0" checked>無し
                  <br>
                  <input type="radio" name="cnt_inp" value="1" >有り
                </div>
                <input type="submit" value="更新">
            <%end%>
            </td>
          </tr>
          <!--行終了-->
<%end%>
<!--臨時のみ追加END-->

          <!--行開始_運用管理者設定完了-->
          <tr>
          <!--アクション名の宣言-->  
          <%@column_name = "set_flg"%>
            <!--項目-->
            <td class="name_cell">
              <%= 
                operation = Operation.find_by(op_code: @column_name)
                operation.name
              %>
            </td>
            <!--時刻表示-->
            <td class="time_cell">
              <%if @sheet.send(@column_name)%>
                設定完了
              <%end%>
            </td>
            <!--入力欄-->
            <td class="done_cell">
              <%= form_tag("/sheets/setted/#{@sheet.id}/#{@column_name}") do %>
                <input type="submit" value="完了">
              <% end %>
            </td>
          </tr>
          <!--行終了-->


          </table>
          
        <div class="post-time">
        </div>
      

      <div class="post-time">
        <%= @sheet.created_at %>
      </div>
      <%= link_to("削除", "/sheets/#{@sheet.id}/destroy", {method: "post"})%> 

      <% if @sheet.creator_code == @current_user.emp_code %>
        <div class="post-menus">
        編集
        削除
        </div>
      <% end %>
    </div>
  </div>
</div>

winterboum

2021/11/09 04:15

なぜ項目ごとにsubmitさせるのでしょう？全体を一回ですませるのではだめ？

HisanoriSato

2021/11/09 04:19

一回で済ませるのはNGです。締め処理を一回ずつ確実に実行した履歴（時刻）を残す必要がある為そうしています。（本画面はその機能をコピペして作ったもので、本丸は別にあります）

HisanoriSato

2021/11/09 04:19

コメントありがとうございます。

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

回答2件

ベストアンサー

2つ案があります。
１ remote: true でPOST？　PATCH？して処理する
２ viewにアンカーを設置しておき、どの更新処理を行ったのか、によって、再描画時に "#" 付きで位置指定する。

２の方は submit毎に戻る位置が変わるけど、その位置は一定だからsubmit押したときよりはずれるかな

投稿2021/11/09 05:35

winterboum

総合スコア23416

HisanoriSato

2021/11/09 07:09

ありがとうございます。remote：trueにして然るべき対処をしたら実現できました。

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

①ビューファイルにてform_tag部分にremote:trueを追加
これによりリクエストをHTMLでなくjavascript化

erb
1            <%= form_tag("/sheets/do/#{@sheet.id}/#{@column_name}",remote: true) do %>
2              <input type="submit" value="打刻">
3             <% end %>

②コントローラのアクションにrespodtoでjabascript形式でのリクエストを記載。
処理内容を「元ページを位置を変えずにリロード」とする

ruby
1def do
2    @sheet = Sheet.find_by(id: params[:id])
3    #パラメータ(アクション名を取得)
4    @column_name = params[:act]
5    #現在時刻を打刻
6    @sheet.public_send("#{@column_name}=", Time.now)
7    @operation = Operation.find_by(op_code: @column_name)
8    op = @operation.name
9
10    respond_to do |format|
11      if @sheet.save
12        format.html { redirect_to("/sheets/#{@sheet.id}") } # showアクションを実行し、詳細ページを表示
13
14        format.js  {render inline: "location.reload();" }# 元ページを位置を変えずにリロード
15      else
16        format.html { render("sheets/#{@sheet.id}") } # showアクションを実行し、詳細ページを表示
17        format.js { render :errors } #エラー
18      end
19    end