scrollTop()を使ってスクロール値を保持したままfixedボタン先のポップアップを開閉させる

scrollTop()を使ってスクロール値を保持したままfixedボタン先のポップアップを開閉させる

タイトルが長くなってしまいましたが、タイトル通り画面をスクロールした時の位置を保持したまま固定ボタン先のポップアップを開閉させる実装をメモしました！

最近スマホ画面などでは固定（追従）ボタンを使うことが多いと思います。

固定（追従）ボタンのリンク先が画面遷移ではなく、ポップアップの場合閉じた時に画面の位置を保持しておきたいですよね！

そんな時は、sccのposition:fixed;　と　jQueryのscrollTop()をうまく使いましょう😊

scrollTop()とは

scrollTop()とは、画面をスクロールした時のスクロール値のことです。

つまりこのメソッドで、ページトップからどのくらいスクロールされたかがわかります。

ちなみに、横スクロールの場合はscrollLeft()で同じように画面の右からどれだけ横スクロールしたかがわかります😊

scrollTop()のほかに、offset().topというのも私はよく使用します。

offset().topとは、画面上からどれだけの位置に指定された要素があるかを取得することができます。

指定された要素に到達したらなにかアクションを行う時に便利ですね！

デモサイトはこちら！

DEMO

HTML

<div class="wrapper">
  <p>ページトップ</p>
  <p class="fixed-btn">
    <a href="javascript:void(0);" class="fixed-btn-link js-overlay-modal-open">追従ボタン</a>
  </p>
</div>
<div class="overlay-modal js-overlay-modal">
    <div class="overlay-modal__overlay"></div>
    <div class="overlay-modal__body">
        <div class="overlay-modal__inner">
            <a href="javascript:void(0);" class="overlay-modal__close js-overlay-modal-close"><i class="fas fa-times"></i></a>
            <p>オーバーレイで表示されるポップアップウィンドウです。</p>
        </div>
    </div>
</div>

CSS

.wrapper{
  display: block;
  height: 2000px; /* スクロールさせるため仮で高さをいれてあります */
  margin: 30px;
}
.fixed-btn-link{
  position: fixed;
  right: 10px;
  bottom: 15px;
  padding: 5px 15px 5px;
  z-index: 1;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 30px;
  -webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 15%);
  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 15%);
  font-size: 13px;
  text-decoration: none;
}
.overlay-modal{
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
}
.overlay-modal__overlay{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.6);
}
.overlay-modal__body{
  width: 100%;
  position: absolute;
  top: 50px;
  -webkit-transition: .4s;
  transition: .4s;
}
.overlay-modal__inner{
  margin: 0 auto;
  width: 80%;
  max-height: calc(100vh - 180px);
  position: relative;
  background-color: #fff;
  border-radius: 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
.overlay-modal__inner p{
  font-size: 13px;
  padding: 20px;
}
.overlay-modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
}
body.modal-open{
  width: 100%;
  height: 100%;
  position: fixed;
}

jQuery

scrollTopValueを代入して画面上からのスクロール値を取得します。

saveScrollTopValue = scrollTopValueで画面上からのスクロール値（scrollTopValue）とsaveScrollTopValueが同じになる指定をします。

固定（追従）ボタンを押下しポップアップが表示された際、bodyに画面上からのスクロール値を直接スタイル({“top”:-scrollTopValue + ‘px’});で指定させスクロール途中のままポップアップが表示されるようにします。

ポップアップを閉じる際は、bodyのcssと直接styleをなくし開いた時のスクロール位置を$(window).scrollTop(saveScrollTopValue);で保持します。

    // スクロール値取得
    var scrollTopValue = 0;
    $(window).scroll(function() {
        scrollTopValue = $(this).scrollTop();
    });
    var saveScrollTopValue = 0;
    // モーダル開く
    $(".js-overlay-modal-open").on("click", function () {
        saveScrollTopValue = scrollTopValue;
        $('body').addClass('modal-open').css({"top":-scrollTopValue + 'px'});
        $(".overlay-modal").fadeIn('normal');
    });
    // モーダル閉じる
    $(".js-overlay-modal-close").on("click", function () {
        $('body').removeClass('modal-open').css('top', '');
        $(window).scrollTop(saveScrollTopValue);
        $(".overlay-modal").fadeOut('normal');
    });
});

scrollTop()は画面のどの位置にきたら何をするか指定したいときにとっても便利ですね😊

私もまだまだわからないことが多いので、都度こちらでメモしていきたいと思います！

おすすめのjQuery参考書はこちら！

Web制作の現場で使うjQueryデザイン入門改訂新版

posted with ヨメレバ

西畑一馬 アスキー・メディアワークス 2013年03月

楽天ブックス

Amazon

7net

honto

ebookjapan

jQuery 仕事の現場でサッと使える！ デザイン教科書

posted with ヨメレバ

吉本集著/ロクナナワークショップ監修 技術評論社 2015年04月

楽天ブックス

Amazon

7net

honto

jQuery最高の教科書

posted with ヨメレバ

シフトブレイン SBクリエイティブ 2013年11月27日頃

楽天ブックス

Amazon

7net

honto

ebookjapan