モーダルウィンドウ(ポップアップ)を閉じた時にトップまでスクロールしてしまう

Question

モーダルウィンドウを閉じた時にトップへスクロールしてしまう(トップへ戻ってしまう)

モーダルウィンドウを閉じた時にトップへスクロールしてしまいます。(トップへ戻ってしまう)
閉じた時も、スクロールせずに開いた位置で閉じるようにしたいです。

該当のソースコード

<a href="#" class="js-modal-open" data-target="modal01">
    <div>
       <img src="img/〇〇.jpg" alt="" />
    </div>
    <p>〇〇</p>
</a>
<div id="modal01" class="modal js-modal">
  <div class="modal-bg js-modal-close">
    <div class="modal-content">
       <a href="#" class="js-modal-close">×</a>
       <img src="img/〇〇.jpg" alt="">
    </div>
  </div>
</div>

*{
  margin: 0;
  padding: 0;
}

.modal{
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 100%;
}

.modal-bg{
  position: absolute;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.modal-content{
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: scroll;
  height: 80%;
  width: 80%;
  border-radius: 10px;
  background: #fff;
  padding: 40px;
}

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

// モーダルウィンドウを開く
$('.js-modal-open').on('click', function(){
  var target = $(this).data('target');
  var modal = document.getElementById(target);
  scrollPosition = $(window).scrollTop();
  $('body').addClass('fixed').css({'top': -scrollPosition});

  $(modal).fadeIn();
  return false;
});

// モーダルウィンドウを閉じる
$('.js-modal-close').on('click', function(){
  $('body').removeClass('fixed');
  window.scrollTo( 0,{'top': -scrollPosition} );

  $('.js-modal').fadeOut();
});

試したこと

①ポップアップにfixedというクラス名を付与し、スクロール位置取得、その場で固定
②閉じるをクリックした際に、fixedクラスを取り、再度スクロール位置取得、該当箇所までスクロール

この手順でうまくいくと思ったのですが、できませんでした。
window.scrollTo( 0,{'top': -scrollPosition} );で閉じた時もスクロールした分の位置までスクロールしてくれると思ったのですが、トップへ戻ってしまいました。

var target = $(this).data('target');
var modal = document.getElementById(target);
上記の記述があるのは、ページ内に複数のモーダルを設置しているからです。

もう4日ほど悩み、心が折れそうなので、どなたかご教授頂けますと幸いです。宜しくお願いします。

Comments

[yambejp]

とりあえずaタグにdivやpは内包できないのでは？

[yuuminxoxo]

こちらに全てのコードは載せていないのですが、親要素で包んでいるので、問題はないと思います。（モーダル該当箇所のみのコードの部分を抜粋して載せています）

Answer 1

自己解決しました。ありがとうございました。

モーダルを閉じる際の×マークをaタグでマークアップしていて、href="#" にしていたことが原因でトップへ戻ってしまっていました。
こちらをaタグでなく、spanタグにかこい直し、解決しました。

<a href="#" class="js-modal-close">×</a>

また質問の際、jQueryの記載を一部誤って投稿していました。

// モーダルウィンドウを開く
$('.js-modal-open').on('click', function(){
  var target = $(this).data('target');
  var modal = document.getElementById(target);
  scrollPosition = $(window).scrollTop();
  $('body').addClass('fixed').css({'top': -scrollPosition});

  $(modal).fadeIn();
  return false;
});

// モーダルウィンドウを閉じる
$('.js-modal-close').on('click', function(){
  $('body').removeClass('fixed');
  window.scrollTo( 0 , scrollpos );

  $('.js-modal').fadeOut();
});

Answer 2

$('.js-modal-close').on('click'

で「window.scrollTo」を発行していますが、
やめればスクロールは回避できるのでは？
（全体的になにをしたいかわかりませんが）

Comments

[yuuminxoxo]

ご回答ありがとうございます。説明が下手で申し訳ないです。
モーダルを開いている間は背景を動かさないようにして、モーダルを閉じたら元々スクロールしていた場所に戻りたいのですが、どうしてもトップに戻ってしまいます。

「window.scrollTo」を発行していますが、
やめればスクロールは回避できるのでは？
→こちらも試しましたが、やはりトップに戻ってしまいます。