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

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

ただいまの
回答率

90.00%

jQuely:ハンバーガーメニューのスクロールイベントが動かない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 60

babi-0105

score 3

前提・実現したいこと

jQuely:ハンバーガーメニューのスクロールイベントを行いたいのですが、動いてくれません。

(実現したい事)
・メニューアイコン の中の’about'(後ほどコードにて紹介)などをクリックした際に、指定した場所まで自動スクロールで移動させたい

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

以前、同じようにスクロールイベントを行った際は動いたのですが、、

その時と同様のコードを使っているのですが、今回は動きません。

該当のソースコード

<head>
     <meta charset="utf-8">
     <title>Shoya Baba.PortFolio</title>
     <link rel="stylesheet" href="portfolio.css">
     <link rel="stylesheet" href="portfolio.media.css">
     <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

</head>

<body>
    <header class="header position-fixed w-100 border-bottom border-secondary text-info">
        <div class="container-fuild text-light">
            <nav class="navbar navbar-expand-md navbar-light sticky-top">
                <div class="navbar-brand header-logo">Portfolio</div>
                <button class="navbar-toggler" data-toggle="collapse" data-target="#menu" type="button">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div id="menu" class="collapse navbar-collapse text-center">
                    <ul class="navbar-nav">
                        <li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink1">About</a></li>
                        <li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink2">Skills</a></li>
                        <li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink3">Production</a></li>
                        <li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink4">Can do.</a></li>
                        <li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink5">Contact</a></li>
                    </ul>
                </div>    
            </nav>
        </div>
    </header>

    <div class="about container my-5">
            <h2 class="text-center border-bottom border-info page-header mb-5 display-4 family pb-3">About</h2>    
        <div class="row">
            <div class="col-md-4 col-lg-5 text-center">
                <img src="IMG_2785.jpeg" class="rounded-circle border border-success mb-5 my-md-5">
            </div>
            <div class="col-md-8 col-lg-7 px-5  mt-lg-5">
                <h2 class="text-center mb-4">ああああああああああああ</h2>
                <p class="about-text text-size">良い良い良い良いいいいいい(2019/3)っっっっっっっっっっっっっs<br>
                っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっx
            </div>
        </div>
    </div>
     <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src='portfolio.js'></script>
</body>
header{
    z-index:10;
    background-color: rgba(0,0,0,0.8);
    font-family: 'Homemade Apple', cursive;
}
$(function(){

    var headerHight = 56;
    //①ページ内スクロール
        $(".navlink1").click(function () {
        var i = $(".navlink1").index(this)
        var p = $(".about").eq(i).offset().top-headerHight;
        $('html,body').animate({ scrollTop: p }, 'fast');
        return false;
    });
});

試した事

①alert('OK');
→アラート命令より前のスクリプトにミスはない事の確認

②jQuely読み込みの、scriptタグを<head>タグの中へ

③<a>ではなく以前の、<li>タグのクラスを’navlink1’に。

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

・今回初めて、bootstrapを使用しました。
→✅bootstrapが何か関係しているのではないかと考えています。

jQuelyの使用に何か影響を与えてしまうのでしょうか?

・navタグのtextの色の変更も行う事ができません。
✅これも何か関係あるのでしょうか?

お忙しいとは思いますが、回答お待ちしております。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • mix-peach

    2019/12/04 10:24

    textの色の変更は、CSSの話だったのですね。
    まずは、スタイルシートの読み込み順ですが、ライブラリ(今回の場合はbootstrap)のCSSよりも後に、自前のCSSファイルを記述する方が良いです。
    あとは、「スタイルの適用状態」も、ブラウザの開発ツールで要素を選択することで確認できますので、一度見てみてください。恐らく自前のCSSをbootstrapのCSSが上書きしてしまっているのではないかなと思います。

    キャンセル

  • babi-0105

    2019/12/04 15:00

    kei344 申し訳ないです!
    ただ今、解決済みにしました。

    キャンセル

  • babi-0105

    2019/12/04 15:12

    mix-peachさんのおしゃる通り、
    bootstrapでcolor指定を行っていたため変更が利きませんでした!

    今回は、

    ✅navbar-lightとカラー指定があることを見落としていました。
    無事、変更したい色に変更する事ができました。

    助言によって気づく事ができました!感謝いたします。

    キャンセル

回答 1

check解決した方法

+1

コンソールのエラーについては、mix-peachさんのおっしゃる通りエラーを調べて解決しました!
ありがとうございます。

➡️ディベロッパーツールのコンソールエラーを使い慣れていなかった事
が今回、明白になりました。

・表示されたエラー:Uncaught TypeError: $(...).animate is not a function

・原因:jQueryのslim版?を使用しているのが原因だと分かりました。
前回使っていた、full版に切り替える事で解決いたしました!

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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