無限スクロール実装時にブラウザの更新ボタンを押した場合に表示を初期状態にする

Question

いつもお世話になっております。
現在RailsでWebページを作成しております。

kaminari + jscrollで無限スクロールを実現しており、下までスクロールされると次の部分が次々によまれていくような形になっております(twitterのようなイメージ)。

初期状態ではユーザーの情報が、10件表示されており、一番下から5%の位置までスクロールされると、次の10件分が表示されていく仕様となっています。

例えば下にスクロールしていき、50件を表示している状態で、ブラウザの更新ボタンを押すと、一瞬一番上へ移動するのですが、その後すぐ更新前の位置に戻ってしまうのですが、これを初期の10件分表示に戻したいと考えています（これもtwitterのようなイメージです）。

現状以下のように、リロード時に一番上に戻るjavascriptを実装している状態です。

こういった制御はどのようにすればよいのでしょうか。

調べ方が悪いとは思うのですが、ググっても分からずこちらに質問させていただきました。
参考になるサイトでも構いませんので、適切な方法をご教示いただけますと幸いです。
よろしくお願いいたします。

環境
Amazon Linux release 2 (Karoo)
Rails 5.2.3
Ruby version: 2.6.1

  # users_controller.rb

  def show
    @users = User.all.page(params[:page]).per(10).order(id: "DESC")
    render 'administrator_users/show'
  end

    # show.html.erb

    <ul class="skill-list jscroll">
      <% @users.each do |user| %>
      <ul class="content">
        <li class="content_right">
          <div class="status">
            <dl><dt>xxx</dt><dd><%= user.xxxx %></dd></dl>
            <dl><dt>yyy</dt><dd><%= user.yyy %></dd></dl>
            <dl><dt>zzz</dt><dd><%= user.zzz %></dd></dl>
            <div class="status_more">
              <dl><dt>aaa</dt><dd><%= user.aaa %></dd></dl>
              <dl><dt>bbb</dt><dd><%= user.bbb %></dd></dl>
              <dl><dt>ccc</dt><dd><%= user.ccc %></dd></dl>
              <dl><dt>ddd</dt><dd><%= user.ddd %></dd></dl>
              <dl><dt>eee</dt><dd><%= user.eee %></dd></dl>
            </div>
            <a href="/" class="bt_more"><span>表示する</span></a>
          </div>
        </li>
      </ul><!-- /.content -->
      <% end %>
      <%= paginate @users %>
      </ul><!-- /.skill-list .jscroll -->

  // 下までスクロールされたら次のページを読み込む
  $(window).on('scroll', function() {
      scrollHeight = $(document).height();
      scrollPosition = $(window).height() + $(window).scrollTop();
      if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) {
            $('.jscroll').jscroll({
              autoTrigger: true,
              padding: 20,
              contentSelector: '.skill-list',
              nextSelector: 'span.next:last a',
              callback: function() {
                $(this).find(".bt_more").prevAll('.status_more').hide();
            });
      }

  });

  // ページ読み込み後一番上へ移動する
  $(document).ready(function(){
    $('html,body').animate({ scrollTop: 0 }, '1');
  });

# Gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.1'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.4', '>= 5.2.4.1'
# Use mysql as the database for Active Record
gem 'mysql2', '>= 0.4.4', '< 0.6.0'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'mini_racer', platforms: :ruby

# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
#gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
gem 'bcrypt', '~> 3.1.7'

# ページング用Gem
gem 'kaminari', '~> 0.17.0'
# jquery用
gem "jquery-rails"

gem 'pry-rails'
gem 'pry-doc'
gem 'pry-byebug'
gem 'pry-stack_explorer'

# OGP対応
gem "opengraph_parser"

# S3対応
gem 'aws-sdk-s3'
gem 'aws-ses', '~> 0.6'
gem 'carrierwave'
gem 'fog-aws'

# minimagic
gem 'mini_magick'

# 通知
gem 'snackbarjs-rails'

# cron
gem 'whenever'



# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of chromedriver to run system tests with Chrome
  gem 'chromedriver-helper'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

Comments

[no1knows]

gemの一覧はどのようになっているでしょうか？

[lyzmfeqpxs54]

Gemfileの一覧を追記しました。
turbolinksは切ってある状況です。

Answer 1

Turbolinksの影響かと思ったのですが、利用していないのですね。
jQueryの読み込みタイミングを遅らせるとどうなるでしょうか？

$(window).load(function(){
  //処理
});

https://qiita.com/katsunory/items/3ba4683629333b94b2be

Comments

[lyzmfeqpxs54]

ご回答ありがとうございます。
ご教示いただいた方法で試したのですが、その場でロードしてしまう状況は変わりません。

twitterなどはどのようにやっているのかが気になってしまいます。

[no1knows]

> 50件を表示している状態で、ブラウザの更新ボタンを押すと、今いる位置が表示されてしまうのですが、
ちなみにリロードしたあとのレコード数は50件になっているかたちでしょうか？

[lyzmfeqpxs54]

度々のご回答ありがとうございます。
表示レコード数も更新する前と同様50件です。

更新後の動きとして「一番上へ移動したのち、すぐ更新前の位置に戻る」ような動きです。
情報が不足しておりました。大変申し訳ございません。

[no1knows]

$('html,body').animate({ scrollTop: 0 }, '1');を$(window).scrollTop(0)とかに変更したらどうなるでしょうか？
animateはゆっくり上がっていく形になるので、その間に$(window).on('scroll', function() {});が実行されている可能性が考えられるかもしれません。