[jQuery]モーダルウィンドウ内のスクロール位置を表示時にリセットする

なくてもいいけどあってもいい、みたいな。

どういうことか

ポップアップ内のコンテンツがブラウザを超えるのでoverflow: scroll;を仕込んであるとする。表示してスクロールして閉じて、また表示すると先程のスクロール位置の状態で表示される。それはそれでいいんだけど、ポップアップを一元管理してあってクリックしたボタンによって表示内容を切り替えていた場合、Aでスクロールした後Bを表示したらAのスクロール位置でBが表示される。スクロール位置が保存されてるから当然だよね、でも新しく表示したのに何なんだよこれは、ということになる。

なので、ポップアップを表示した際に必ず先頭が表示されてるようにしたい、という話。

.scrollTop(0)で解決

.scrollTop()を使えば表示位置を指定できるので、.scrollTop(0)にすれば先頭になるじゃないというとても簡単な話。ただ、使い勝手が悪いというかコツがある。

こんな感じで組んでたとして。

<a id="popup_btn">show</a>
<div id="popup">
    <div class="wrap">
        <div class="set">
            <div class="close"><a id="close_btn">close</a></div>
            <div class="inner" style="overflow-y: auto;">
                <article>中身</article>
            </div>
        </div>
    </div>
</div>

  //表示のタイミングでリセット
  $('#popup_btn').click(function(){
    $('#popup').fadeIn();
    $('#popup .inner').scrollTop(0);
  })

  //非表示のタイミングでリセット
  $('#close_btn').click(function(){
    $('#popup .inner').scrollTop(0);
    $('#popup').hide();
  })

.scrollTop()は該当要素が表示されている状態じゃないと効かないっぽい。

なので仕込むタイミングはshowの後かhideの前になる。fadeIn・fadeOutで切り替える場合はfadeInでしか仕込めない。fadeOutの直前に仕込むと消える瞬間に表示位置が変わるので、閲覧者はバグったかな？と思ってしまう。

そういう注意点がある。