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

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

ただいまの
回答率

90.45%

  • WordPress

    9150questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • jQuery

    8368questions

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

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,811

u_Tagae

score 5

 前提・実現したいこと

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

メニューボタン自体は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

 該当のソースコード

<script type='text/javascript' src='http://○○○/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://○○○/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
~
~
<script type="text/javascript">
    jQuery(document).ready(function ($) {
        var current_scrollY;
        var scroll2;
        var switch_menu = false;
        $('#menuButton').on('click', function () {
            current_scrollY = $(window).scrollTop();
            $('#menuButton').toggleClass('Closed Open');
            $('#menuContainer').toggleClass('Closed Open');
            $('#container').toggleClass('Close Open')

            if (switch_menu) {
                $('#container').removeAttr('style');
                ①    $('body').prop({scrollTop: scroll2});
                ②    switch_menu = false;
            } else {
            scroll2 = $(window).scrollTop();
                $('#container').css({
                    position: 'fixed',
                    width: '100%',
                    top: -1 * current_scrollY,
                });
                switch_menu = true;
            }
    ③    });
    });
</script>

 試したこと

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

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

WordPress 4.9.4

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+4

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/14 11:06

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

    この度はありがとうございます。

    キャンセル

0

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

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

#modal {
  position: fixed;
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
}

#modal > div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/14 11:10

    ご回答ありがとうございます。

    position:fixedの件はメニュー表示中の背面のスクロールを禁止するために入れておりました。
    本題にはあまり関係ない部分だったかもしれません。

    誤解を招く表記をしてしまいすみませんでした。

    キャンセル

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

  • ただいまの回答率 90.45%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • WordPress

    9150questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • jQuery

    8368questions

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

  • トップ
  • jQueryに関する質問
  • scrollTop使用時、値の取得はできるが、値を挿入し移動させようとすると"is not defined"となってしまう