可視範囲に入った時のアニメーション、リロード時の挙動について

Question

効率の良いコードが書けず悩んでいます。

現在の実装内容
①window.addEventListener('scroll', でスクロールを検知
②可視範囲に入ったらアニメーションさせたいオブジェクトに.activeクラスを付与、アニメーションが実行される
③リロード時は$('html,body').animate({ scrollTop: 0 }, '1');でページトップへ

この実装方法だと、例えばページの中間でリロードした場合③が実行されますがその際に意図せず①が実行されてしまい、要はページをリロードしたのにページ中間までのアニメーションはすでに実行後の状態で表示されています。

もちろん力技で③→①→②→removeClass('active')のようにすれば希望の形にはなりますが付与して削除してなんだかなぁと思います、、

そもそもの現状の実装方法が悪いのでしょうか。
お力をお貸しください。よろしくお願いします。

追記(コード例)

<div id="a" class="fade-in">〜</div>

#a{
  opacity: 0;
  transition: opacity 1s ease;
  &.active{
    opacity: 1;
  }
}

$(function(){
  // リロード時ページトップへ
  $('html,body').animate({ scrollTop: 0 }, '1');
});

$(window).on('load', function(){
  // スクロールイベント
  window.addEventListener('scroll', function(e){
    // まだactiveになってない要素に対して
    $('.fade-in').not('.active').each(function(){

      var pos = $(this).offset().top;
      var scrollPos = $(window).scrollTop();
      var wh = $(window).height();

      // 任意の位置までスクロールしたらactiveクラスを付与
      if (scrollPos > pos - wh + wh/5){
        $(this).addClass('active');
      }
    });
  });
}

Comments

[m.ts10806]

もう少し全体の流れが分かるコードを例示していただけませんか？
（HTML,CSSもあるとなお良いです）

[退会済みユーザー]

わかりにくくて申し訳ありませんでした。
以下コードになります。

// html
// アニメーションさせたい要素にfade-inクラスを付与しておく
<div id="a" class="fade-in">〜</div>

// scss
#a{
opacity: 0;
transition: opacity 1s ease;
&.active{
opacity: 1;
}
}

// js
$(function(){
// リロード時ページトップへ
$('html,body').animate({ scrollTop: 0 }, '1');
});
$(window).on('load', function(){
// スクロールイベント
window.addEventListener('scroll', function(e){
// まだactiveになってない要素に対して
$('.fade-in').not('.active').each(function(){

var pos = $(this).offset().top;
var scrollPos = $(window).scrollTop();
var wh = $(window).height();

// 任意の位置までスクロールしたらactiveクラスを付与
if (scrollPos > pos - wh + wh/5){
$(this).addClass('active');
}
});
});
}

自分なりに書いたものでして、あくまで参考になります。
要はやりたいこととしては、リロード時ページトップに移動して、きちんとアニメーションを動作させたいです。
よろしくお願い致します。

[m.ts10806]

質問は編集できるので質問本文に追記してください（こちらのコメント欄はデフォルト非表示です）
コード部分はマークダウン利用してくださいね。
https://teratail.com/help#about-markdown

[退会済みユーザー]

マークダウンを教えてくださりありがとうございました。
またひとつteratailが使いやすくなりました。

Answer 1

リロード時スクロール処理をやめればよいのでは？

$(window).scrollTop($('body').offset().top);

Comments

[退会済みユーザー]

ご回答頂きありがとうございます。
まさにこういうコードを探していて早速試してみたのですが、なぜか上手く行かなかったです、、
デバッグで動かすと一度ちゃんとトップに移動するのですが、jquery-3.4.1.min.js通過中になぜか元の位置に戻ってしまいます。。
もう少し調べてみます。