質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

解決済

1回答

1591閲覧

Railsでrenderして再帰したページのスクロール位置に戻りたい

magellan

総合スコア17

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2019/04/23 05:05

お世話になります。

Railsで売上の予測ができるようなページを作成しております。
過去の売上が一覧に表示されており、一覧にある品番をクリックすると、現在庫が表示されるようになっております。※画像参照

画像1
イメージ説明
画像2
イメージ説明

上記画像では、画像1にあるテーブルの品番にある「E220」をクリックすると画像2のように在庫総数テーブルが表示されるようになっております。
ここで質問です。
index.html.slimに表示されている一覧から、品番をクリックして在庫テーブルを表示したときに(index.html.slimに再帰したとき)に、
遷移前のスクロール位置が表示されるようにしたいです。現状、ページトップが表示されてしまいます。
似たような質問があったのですが、その質問は解決しておらず、回答にあった方法も試しましたができませんでした。
宜しくお願い致します。


試したこと
controllerでrenderして元のindex.html.slimのページを表示する際に、下記のように書いてみました。
render index_path + '#id名'
テーブルの品番の一つ一つにidがふってあるので、#を付ければ遷移後にそのidにもどるかと思いましたが、下記エラーとなりました。

error

1Missing template http://localhost:3000/index#E22010 with {:locale=>[:ja], :formats=>[:html], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, :ruby, :slim, :coffee, :jbuilder]}. Searched in: * "D:/ルート/app/views"

環境
windows10 x64
Rails 5.2.2
ruby 2.5.3p105 (2018-10-18 revision 65156) [x64-mingw32]

宜しくお願いいします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

javascriptで遷移前のテーブルのスクロール位置を取得し、javascript内のグローバル変数に入れておく。
遷移後にロードが終わったタイミング(turbolinksのload)でグローバル変数に格納しておいたスクロール位置をテーブルに反映させることでスクロール位置を復元するとこができました。

javascript

1 2var scrollpoint = 0 //スクロール位置を格納するグローバル変数 3 4document.addEventListener('turbolinks:before-visit', function() { //遷移する前に動くイベント 5 get_scroll_point(); //呼び出す関数(下記) 6}); 7 8document.addEventListener('turbolinks:load', function() { //遷移後に動くイベント 9 restore_scroll(); 10}); 11 12// スクロール位置を復元 13function get_scroll_point() { 14 var tableScrollXPoint = document.getElementById("maintable").scrollTop; //テーブルに振ってあったid(maintable)のスクロール位置を取得 15 scrollpoint = tableScrollXPoint //スクロール位置をグローバル変数に格納(これは↑と1行にまとめても良さげですね) 16} 17 18function restore_scroll() { 19 document.getElementById("maintable").scrollTop = scrollpoint; //遷移前のスクロール位置をテーブルに設定し、復元する 20} 21

慣れないjavascriptに奮闘しました。
誰かの役に立てばと思います。
ほかに良い方法がありましたら引き続きご教授願います。

投稿2019/04/25 00:26

magellan

総合スコア17

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問