アプリなどを開発するブログ

React Native / Swift / Ruby on Railsなどの学習メモ。


Railsでページ遷移するとスクロール位置がおかしい場合の対処法

Railsのアプリで縦長のページに遷移する際に、
途中までスクロールされた状態で遷移することがあると思います。

調べてみるとRailsのTurbolinks はbody要素を全て入れ替えているだけなので、
スクロール位置も保持してしまい、
ページ遷移した際に、変な位置からページが始まっているように見えてしまいます。

対処法1

turbolinksを使わないで遷移させる

<%= link_to top_page_path, data: { no_turbolink: true } %>

data: { no_turbolink: true }
をつけると、turbolinksを使わないでページを遷移させることができます。

対処法2

jsを使って読み込み後に強制スクロールさせる

https://gist.github.com/jamonholmgren/5154738

  $(document).on "page:change", ->
    window.prevPageYOffset = window.pageYOffset
    window.prevPageXOffset = window.pageXOffset
  $(document).on "page:load", ->
    if $(".fix-scroll").length > 0
      $('.fix-scroll').hide().show() # force re-render -- having an issue with that on Chrome/OSX
      window.scrollTo window.prevPageXOffset, window.prevPageYOffset

以上のスクリプトでOK。