jQueryでscrollTopが効かず、top:0になってしまう

Question

------### 前提

HTML/CSS(SCSS)/jQueryで実装
jQueryでモーダルを作成。

実現したいこと

モーダルを開いたときに後ろの背景を固定して、モーダルを閉じたときに開いた場所に戻るように設定したい
Google Chrome環境でいけている。(固定されないこともある)
Safari環境では固定されない。

発生している問題・エラーメッセージ

背景が固定されず、top:０になり一番上に戻ってしまう。

該当のソースコード

let scrollPosition;
scrollPosition = document.documentElement.scrollTop;
$(".is-open").on("click",function() {
  $(this).next(".c-modal").fadeIn();
  $('body').addClass('fixed').css({'top': -scrollPosition});
});
$(".is-close").on("click",function() {
  $(".c-modal").fadeOut();
  $('body').removeClass('fixed').css({'top': 0});
  window.scrollTo( 0 , scrollPosition );
});

let scrollPosition;
scrollPosition = document.documentElement.scrollTop;
$(".is-open").on("click",function() {
  $(this).next(".c-modal").fadeIn();
  $('body').addClass('fixed').css({'top': -scrollPosition});
});
$(".is-close").on("click",function() {
  $(".c-modal").fadeOut();
  $('body').removeClass('fixed').css({'top': 0});
  window.scrollTo( 0 , scrollPosition );
});

<button class="c-button__modal is-open">ボタン</button>
 <div class="c-modal is-close">
   <div class="c-modal__text">
      <p>なんたらかんたら</p>
   </div>
</div>

body.fixed {
  position:fixed;
  position: -webkit-fixed;
  left:0;
  width:100%;
  height:100%;
}

html {
    font-size: 62.5%; /* 16px * 62.5% = 10px */
    font-style: normal;
    font-weight: 400;
    line-height:1.0;
    width: 100%;
  }
  body {
    overflow: hidden;
    z-index: -100;
    width: 100%;
  }

試したこと

scrollPosition = document.documentElement.scrollTop || $(window).scrollTop()
としたり、$(window).scrollTop()だけにしたり、$(’html’).scrollTop()や$(’body').scrollTop()

補足情報（FW/ツールのバージョンなど）

現状のコードで確認されたもの
Mac Chrome環境△(固定される時もある)
Mac Safari環境×
iPhone Safari環境×

Answer 1

let scrollPosition;
$(".is-open").on("click", function () {
scrollPosition = $(window).scrollTop();
$('body').addClass('fixed').css({ 'top': -scrollPosition });
});
$(".is-close").on("click", function () {
$('body').removeClass('fixed').css({ 'top': 0 });
$(window).scrollTop(scrollPosition);
});

で解決しました

Answer 2

document.documentElement ではなく、document.scrollingElement を参照すると直るかもしれません。

Comments

[uratarosu]

int32_tさん
返信ありがとうございます。
document.scrollingElementに変更してみましたが変わらずでした。。

キャッシュの問題かなと思い、キャッシュも消してみたのですが、
ボタンを押した際にtop:0に移動してtop:0で固定されてしまいます。