scrollTop使用時、値の取得はできるが、値を挿入し移動させようとすると"is not defined"となってしまう

前提・実現したいこと

スマホ向けサイトで、モーダルウィンドウを使ったメニュー表示を作っています。

メニューボタン自体は__position:fixed__でウィンドウ上端に固定してあります。

ページをスクロールした状態で
1.メニューを開いた時
2.メニューを閉じた時
にそれぞれ表示中の背景部分を維持する予定です。

発生している問題・エラーメッセージ

メニューを開いた際の固定は__$(window).scrolltop()__から取得した値と__position:fixed__でうまく行っているのですが、
メニューを閉じる際にページ最上部に移動してしまいます。

以下、Chromeのデベロッパーツールで確認したエラーとなります。

ReferenceError: scrollTop is not defined at eval (eval at <anonymous> (http://○○○/:16:5), <anonymous>:1:1) at HTMLAnchorElement.<anonymous> (http://○○○/:264:5) at HTMLAnchorElement.dispatch (http://○○○/wp-includes/js/jquery/jquery.js?ver=1.12.4:3:12444) at HTMLAnchorElement.r.handle (http://○○○/wp-includes/js/jquery/jquery.js?ver=1.12.4:3:9173)
message:"scrollTop is not defined"
stack:"ReferenceError: scrollTop is not defined
	at eval (eval at <anonymous> (http://○○○/:16:5), <anonymous>:1:1)
	at HTMLAnchorElement.<anonymous> (http://○○○/:264:5)
	at HTMLAnchorElement.dispatch (http://○○○/wp-includes/js/jquery/jquery.js?ver=1.12.4:3:12444)
	at HTMLAnchorElement.r.handle (http://○○○/wp-includes/js/jquery/jquery.js?ver=1.12.4:3:9173)"
__proto__:Error

該当のソースコード

html
1<script type='text/javascript' src='http://○○○/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
2<script type='text/javascript' src='http://○○○/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
3～
4～
5<script type="text/javascript">
6	jQuery(document).ready(function ($) {
7		var current_scrollY;
8		var scroll2;
9		var switch_menu = false;
10		$('#menuButton').on('click', function () {
11			current_scrollY = $(window).scrollTop();
12			$('#menuButton').toggleClass('Closed Open');
13			$('#menuContainer').toggleClass('Closed Open');
14			$('#container').toggleClass('Close Open')
15
16			if (switch_menu) {
17				$('#container').removeAttr('style');
18				①	$('body').prop({scrollTop: scroll2});
19				②	switch_menu = false;
20			} else {
21			scroll2 = $(window).scrollTop();
22				$('#container').css({
23					position: 'fixed',
24					width: '100%',
25					top: -1 * current_scrollY,
26				});
27				switch_menu = true;
28			}
29	③	});
30	});
31</script>

試したこと

ソース①__$('body').prop({scrollTop: scroll2});__　を
①'　 $(window).scrollTop(scroll2);
と変更した所、②、③に設置したブレークポイントでは見た目上想定位置に移動しているようなのですが、最終的にページ上部に移動しています。

補足情報（FW/ツールのバージョンなど）

WordPress 4.9.4

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

回答2件

ベストアンサー

まず、scrollTopというのはjQueryが生み出した存在なので、.propでの操作はできません。直接.scrollTop(値)で制御するか、.animate({scrollTop: 値})のようにするか、となります。

そして、「最終的にページ上部に移動」するのは、1つの可能性として「デフォルト操作」ということが考えられます。'#menuButton'が<a href='#~~~'>のようなタグだと、「そのハッシュ位置に移動する」という機能がありますので、イベントで位置を制御したい場合にはreturn falseなどで打ち消す必要があります。

投稿2018/03/14 01:39

maisumakun

総合スコア145183

u_Tagae

2018/03/14 02:06

ご指摘の通り＃menuButtonのhrefが#になっておりました。 <a href="javascript:void(0);" onClick="xxxx();">と変更した所想定通りの動きをしてくれました。この度はありがとうございます。

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

どちらかというと、
JavaScriptというより、CSSの当て方の方に原因があるように思えます。
そもそも、position: fixedを効かせているのなら、
top値を移動させる意味があるのか、という疑問があります。

ボタンを押すと、モーダルウィンドウが、右から左に出てくるという動きだと想定して、
モーダルウィンドウの初期CSSを、
下記にし、

css
1#modal {
2  position: fixed;
3  left: 100%;
4  top: 0;
5  width: 100%;
6  height: 100%;
7}
8
9#modal > div {
10  position: absolute;
11  left: 0;
12  top: 0;
13  width: 100%;
14  height: 100%;
15}

jQueryにて、ボタンを押した時の動作は、

javascript
1$("#modal > div").css({
2  left: "-100%"
3});

とするのはいかがでしょうか。
要は、最初からモーダルウィンドウ自体は、fixedにして、スクロールに追従させて、
かつ画面外に追いやっておき、
ボタンを押すと、モーダルの子要素が、顔を出す、って感じです。
こっちの方が、javascriptでpositionをいちいち変えるより、うまくいきやすいと思います。

投稿2018/03/14 01:51