質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.45%
スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

ポップアップ

一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。

モーダルダイアログ

モーダルダイアログとは、ユーザーに重要な情報を表示するときに用いられる視覚的なダイアログのことを指します。これらのダイアログは他のすべてのコンテンツの上に表示され、ユーザーの入力を受けるまでアプリケーションフローは停止されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

5518閲覧

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

yuuminxoxo

総合スコア4

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

ポップアップ

一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。

モーダルダイアログ

モーダルダイアログとは、ユーザーに重要な情報を表示するときに用いられる視覚的なダイアログのことを指します。これらのダイアログは他のすべてのコンテンツの上に表示され、ユーザーの入力を受けるまでアプリケーションフローは停止されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/09/14 12:04

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

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

該当のソースコード

HTML

1<a href="#" class="js-modal-open" data-target="modal01"> 2 <div> 3 <img src="img/〇〇.jpg" alt="" /> 4 </div> 5 <p>〇〇</p> 6</a> 7<div id="modal01" class="modal js-modal"> 8 <div class="modal-bg js-modal-close"> 9 <div class="modal-content"> 10 <a href="#" class="js-modal-close">×</a> 11 <img src="img/〇〇.jpg" alt=""> 12 </div> 13 </div> 14</div>

CSS

1*{ 2 margin: 0; 3 padding: 0; 4} 5 6.modal{ 7 display: none; 8 position: fixed; 9 top: 0; 10 right: 0; 11 height: 100vh; 12 width: 100%; 13} 14 15.modal-bg{ 16 position: absolute; 17 height: 100vh; 18 width: 100%; 19 background: rgba(0, 0, 0, 0.8); 20} 21 22.modal-content{ 23 position: absolute; 24 top: 55%; 25 left: 50%; 26 transform: translate(-50%, -50%); 27 overflow: scroll; 28 height: 80%; 29 width: 80%; 30 border-radius: 10px; 31 background: #fff; 32 padding: 40px; 33} 34 35body.fixed { 36 position: fixed; 37 width: 100%; 38 height: 100%; 39 left: 0; 40}

jQuery

1// モーダルウィンドウを開く 2$('.js-modal-open').on('click', function(){ 3 var target = $(this).data('target'); 4 var modal = document.getElementById(target); 5 scrollPosition = $(window).scrollTop(); 6 $('body').addClass('fixed').css({'top': -scrollPosition}); 7 8 $(modal).fadeIn(); 9 return false; 10}); 11 12// モーダルウィンドウを閉じる 13$('.js-modal-close').on('click', function(){ 14 $('body').removeClass('fixed'); 15 window.scrollTo( 0,{'top': -scrollPosition} ); 16 17 $('.js-modal').fadeOut(); 18});

試したこと

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

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2021/09/14 12:14

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

2021/09/14 13:38

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

回答2

0

自己解決

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

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

css

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

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

jQuery

1// モーダルウィンドウを開く 2$('.js-modal-open').on('click', function(){ 3 var target = $(this).data('target'); 4 var modal = document.getElementById(target); 5 scrollPosition = $(window).scrollTop(); 6 $('body').addClass('fixed').css({'top': -scrollPosition}); 7 8 $(modal).fadeIn(); 9 return false; 10}); 11 12// モーダルウィンドウを閉じる 13$('.js-modal-close').on('click', function(){ 14 $('body').removeClass('fixed'); 15 window.scrollTo( 0 , scrollpos ); 16 17 $('.js-modal').fadeOut(); 18});

投稿2021/09/14 13:52

yuuminxoxo

総合スコア4

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

投稿2021/09/14 12:16

yambejp

総合スコア115051

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuuminxoxo

2021/09/14 13:35

ご回答ありがとうございます。説明が下手で申し訳ないです。 モーダルを開いている間は背景を動かさないようにして、モーダルを閉じたら元々スクロールしていた場所に戻りたいのですが、どうしてもトップに戻ってしまいます。 「window.scrollTo」を発行していますが、 やめればスクロールは回避できるのでは? →こちらも試しましたが、やはりトップに戻ってしまいます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問