scrollTopで現在見ているページのスクロール位置の情報を取得したいが値が0になってしまう

いつもお世話になっております。

モーダルメニューの開閉の際、
閉じた時に、現在見ているページ位置を維持した状態で閉じるようにしたいのですが、

scrollTopで現在の値を取得することができずにおります。

やりたいこと

1▼
webサイトにモーダルメニューを実装して、
.menu-mobile をクリックしたらメニューが開くようにする。

2▼
.menu-mobileをクリックしたら、.mega-menu.openを
mega-menu.closeに切り替える

3▼
.menu-mobileをクリック（メニューを開く）したら

.closeを追加し、OPEN時の処理を実行して
bodyに .fixed を追加し、ページの高さ分を計算して調整し
現在表示しているメインコンテンツの位置が動かないようにする。

4-1▼
もう一度 .menu-mobileをクリックしたら

CLOSE時の処理を行い

bodyから .fixed を削除する。

4-2▼
scrollTopでページの高さ分を計算して
メニューを開いた時に現在見ている位置に移動したい。

現在の状況

4-1 までは動作するのですが

4-2 のscrollTopがうまく動作ません。

htmlは下記のような状態です。

toggleClass によって close を切り替えています。

html
1<div class="mega-menu open">
2
3    <!-- ↓下をクリックすると↑のmega-menuのopenの部分がクリックするとcloseがついて、もう一度クリックすると消えます -->
4    <a href="#" class="menu-mobile"></a>
5
6    <ul style="display: block;">
7        <li><a href="#">Home</a></li>
8        <li class="menu-dropdown-icon"><a href="">About</a>
9            <ul>
10                <li><a href="">School</a>
11                    <ul>
12                        <li><a href="">Lidership</a></li>
13                    </ul>
14                </li>
15                <li><a href="#">Study</a>
16                    <ul>
17                        <li><a href="#">Undergraduate</a></li>
18                    </ul>
19                </li>
20                <li><a href="#">Research</a>
21                    <ul>
22                        <li><a href="#">Undergraduate research</a></li>
23                    </ul>
24                </li>
25                <li><a href="#">Something</a>
26                    <ul>
27                        <li><a href="#">Sub something</a></li>
28                    </ul>
29                </li>
30            </ul>
31        </li>
32        <li class="menu-dropdown-icon"><a href="">News</a>
33            <ul class="normal-sub">
34                <li><a href="">Today</a></li>
35            </ul>
36        </li>
37        <li class="menu-dropdown-icon"><a href="">Contact</a>
38            <ul>
39                <li><a href="#">School</a>
40                    <ul>
41                        <li><a href="#">Lidership</a></li>
42                    </ul>
43                </li>
44                <li><a href="#">Study</a>
45                    <ul>
46                        <li><a href="#">Undergraduate</a></li>
47                    </ul>
48                </li>
49                <li><a href="#">Study</a>
50                    <ul>
51                        <li><a href="#">Undergraduate</a></li>
52                    </ul>
53                </li>
54                <li><a href="#">Empty sub</a></li>
55            </ul>
56        </li>
57    </ul>
58
59</div>

jQuery
1$(".menu-mobile").on("click", function (e) {
2e.preventDefault();
3scrollPosition = $(window).scrollTop();
4
5var scrollPosition;
6$(".mega-menu").toggleClass('close');
7$(".mega-menu > ul").slideToggle('show-on-mobile');
8
9if ( $(".mega-menu").hasClass('close') ) {
10
11/* OPEN時の処理 */
12$('body').addClass('fixed').css({'top': -scrollPosition});
13} else {
14
15/* CLOSE時の処理*/
16$('body').removeClass('fixed').css({'top': 0});
17
18$('body').animate({scrollTop:scrollPosition});
19/* これがうまくうごきません */
20
21}
22});

ためしたこと

OPEN時の処理と、CLOSE時の処理に

$('body').text(scrollPosition);

を入れて、どのような値が出力されるか試してみたところ、

OPEN時の処理の時は、スクロール位置の値が取得できています。

しかしCLOSE時の処理では「0」となっていてうまく取得できていません。

どのようにすれば記述するとうまくよいのでしょうか。

調べてもどうしてもわかりませんでした。どうぞよろしくおねがいします。

行動規範の内容に同意します

回答1件

scrollPosition = $(window).scrollTop();

var scrollPosition;

この部分を

var scrollPosition;
scrollPosition = $(window).scrollTop();

もしくは

var scrollPosition = $(window).scrollTop();

としてください。varは変数の宣言用であるので値の代入前にしないといけません。

投稿2020/05/17 21:52

mari.rinn

総合スコア296

Novz

2020/05/17 23:38

アドバイスありがとうございます。 >varは変数の宣言用であるので値の代入前にしないといけません。こちらしらずに書いておりました。感謝しております。早速修正してみたのですが、、 var scrollPosition; scrollPosition = $(window).scrollTop(); var scrollPosition = $(window).scrollTop(); いずれでもOPEN時の処理では動作するのですが、 CLOSE時には値が0のままでした。他になにか改善法ございませんでしょうか。。お手数をおかけしますがどうぞよろしくおねがいします。

mari.rinn

2020/05/17 23:54

ちなみに、ブラウザのキャッシュはクリアされてますか？

Novz

2020/05/18 00:02

mari.rinn様、はい。ブラウザのキャッシュを削除しハイパーリロードを行い、他の部分の値を変えたりして更新されているかチェックした上で動作チェックしてみたのですが、 CLOSE時のscrollPositionの値は0のままでした。変更後のコードは下記のようにしております。 $(".menu-mobile").on("click", function (e) { e.preventDefault(); var scrollPosition = $(window).scrollTop(); $(".mega-menu").toggleClass('close'); $(".mega-menu > ul").slideToggle('show-on-mobile'); if ( $(".mega-menu").hasClass('close') ) { /* OPEN時の処理 */ $('body').addClass('fixed').css({'top': -scrollPosition}); } else { /* CLOSE時の処理*/ $('body').removeClass('fixed').css({'top': 0}); $('body').animate({scrollTop:scrollPosition}); } });

mari.rinn

2020/05/18 00:46 編集

質問ですが、 $('body').text(scrollPosition); これは具体的にどこに記載されましたか？それともう1点 fixed　のCSSを書いて頂けますか？ちょっと今パソコン立ち上げられないので、後で検証させて頂きますね。

mari.rinn

2020/05/18 00:55

あともう一つ余談ですが、CSSの、記載がないので、実際のモーダルがどのくらいのサイズかとかわからないのであれですが、一般的には、モーダルを立ち上げた際は背景(body)を固定させて、スクロールしないようにして、モーダルを閉じる時にそれを解除する　というやり方をしますので、練習用ではなくて実装されるのならそちらの方が良いかもですね。

Novz

2020/05/18 00:58

mari様ありがとうございます。 $('body').addClass('fixed').css({'top': -scrollPosition}); でbodyにfixedクラスを追加して、cssには body.fixed { position: fixed; width: 100%; height: 100%; left: 0; } という設定をしています。 CLOSEをクリックしたときにはこれを解除して再びメインコンテンツがスクロールするようにしているのですが、もしかしてこのあたりが原因でしょうか。

Novz

2020/05/18 01:44

すみません、もう一点回答もれがありました。 >$('body').text(scrollPosition); >これは具体的にどこに記載されましたか？こちらですが、 if ( $(".mega-menu").hasClass('close') ) { /* OPEN時の処理 */ $('body').addClass('fixed').css({'top': -scrollPosition}); } else { /* CLOSE時の処理*/ $('body').removeClass('fixed').css({'top': 0}); $('body').animate({scrollTop:scrollPosition}); $('body').text(scrollPosition); /* ここに書きました */ } }); 上のように書くと、ページに数値が出るのですがその値が「0」になります。 /* OPEN時の処理 */ $('body').addClass('fixed').css({'top': -scrollPosition}); $('body').text(scrollPosition); ↑のようにOPEN時の処理に追加してみると、現在スクロールしている場所の数値が表示されるので、OPENの方だけはうまく取得しているのにCLOSEが取得できていないと判断しました。お手数をおかけしてもうしわけありません。。どうぞよろしくおねがいします。

mari.rinn

2020/05/18 03:58 編集

いろいろあるので、1つずついきましょう。まず、addClass()とremoveClass() これはこれのみ、CSSの追加や削除は、それのみ　で別々に処理を行ってください。なのですが、そもそも、 body.fixed { position: fixed; width: 100%; height: 100%; left: 0; } の中に、　'top': 0　　というのは存在しない訳ですが、これはどういう意図でこうされたのですか？つなげて書かれてたのは、要はクラスの付与と削除に伴ってcssに書かれてるものを追加・削除したいということなのかなと判断して、別々にと書きましたが、そうではないなら、この部分で何をやりたいのかも教えてください。

mari.rinn

2020/05/18 05:25

ちょっとずつになってすみません。それと、質問文を編集して、jQueryの中に出てくるクラスの分、それぞれのCSSを記載して頂けますか？

mari.rinn

2020/05/18 07:48 編集

いろいろと正しくない書き方がある為、1つずつそれを修正して頂いてからと思ったのですが、自分で検証してみて、やはり今のやり方では無理だろうとわかったのでググりました。、スクロール位置の問題と、それの対処法は、以下のページを参考にされると良いと思います。頑張ってください。 https://coliss.com/articles/build-websites/operation/javascript/prevent-page-scrolling-when-a-modal-is-open.html

行動規範の内容に同意します