Q&A
「スクロール」については、提示コード自体にミスはないと思いますが、実際にメニューをクリックした時には、コンソールにエラーが出ているはずで、そのエラーを調べれば答えはすぐに見つかるはずです。
「textの色変更」については、該当のコードを提示されないと、回答を得るのは難しいと思います。
前提・実現したいこと
jQuely:ハンバーガーメニューのスクロールイベントを行いたいのですが、動いてくれません。
（実現したい事）
・メニューアイコン の中の’about'（後ほどコードにて紹介）などをクリックした際に、指定した場所まで自動スクロールで移動させたい
発生している問題・エラーメッセージ
以前、同じようにスクロールイベントを行った際は動いたのですが、、
その時と同様のコードを使っているのですが、今回は動きません。
該当のソースコード
HTML
1 2<head> 3 <meta charset="utf-8"> 4 <title>Shoya Baba.PortFolio</title> 5 <link rel="stylesheet" href="portfolio.css"> 6 <link rel="stylesheet" href="portfolio.media.css"> 7 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 8 9</head> 10 11<body> 12 <header class="header position-fixed w-100 border-bottom border-secondary text-info"> 13 <div class="container-fuild text-light"> 14 <nav class="navbar navbar-expand-md navbar-light sticky-top"> 15 <div class="navbar-brand header-logo">Portfolio</div> 16 <button class="navbar-toggler" data-toggle="collapse" data-target="#menu" type="button"> 17 <span class="navbar-toggler-icon"></span> 18 </button> 19 <div id="menu" class="collapse navbar-collapse text-center"> 20 <ul class="navbar-nav"> 21 <li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink1">About</a></li> 22 <li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink2">Skills</a></li> 23 <li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink3">Production</a></li> 24 <li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink4">Can do.</a></li> 25 <li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink5">Contact</a></li> 26 </ul> 27 </div> 28 </nav> 29 </div> 30 </header> 31 32 <div class="about container my-5"> 33 <h2 class="text-center border-bottom border-info page-header mb-5 display-4 family pb-3">About</h2> 34 <div class="row"> 35 <div class="col-md-4 col-lg-5 text-center"> 36 <img src="IMG_2785.jpeg" class="rounded-circle border border-success mb-5 my-md-5"> 37 </div> 38 <div class="col-md-8 col-lg-7 px-5 mt-lg-5"> 39 <h2 class="text-center mb-4">ああああああああああああ</h2> 40 <p class="about-text text-size">良い良い良い良いいいいいい（2019/3）っっっっっっっっっっっっっs<br> 41 っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっx 42 </div> 43 </div> 44 </div> 45 <!-- Bootstrap CSS --> 46 <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"> 47 48 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 49 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 50 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 51 <script src='portfolio.js'></script> 52</body> 53
CSS
1header{ 2 z-index:10; 3 background-color: rgba(0,0,0,0.8); 4 font-family: 'Homemade Apple', cursive; 5}
Javascript
1 2$(function(){ 3 4 var headerHight = 56; 5 //①ページ内スクロール 6 $(".navlink1").click(function () { 7 var i = $(".navlink1").index(this) 8 var p = $(".about").eq(i).offset().top-headerHight; 9 $('html,body').animate({ scrollTop: p }, 'fast'); 10 return false; 11 }); 12}); 13
試した事
①alert('OK');
→アラート命令より前のスクリプトにミスはない事の確認
②jQuely読み込みの、scriptタグを<head>タグの中へ
③<a>ではなく以前の、<li>タグのクラスを’navlink1’に。
補足情報（FW/ツールのバージョンなど）
・今回初めて、bootstrapを使用しました。
→✅bootstrapが何か関係しているのではないかと考えています。
jQuelyの使用に何か影響を与えてしまうのでしょうか？
・navタグのtextの色の変更も行う事ができません。
✅これも何か関係あるのでしょうか？
お忙しいとは思いますが、回答お待ちしております。
①headerのclassに’text-info’があるのですが、色が変わりません。。
②コンソールのエラーについては、mix-peachさんのおっしゃる通りエラーを調べて解決しました！
ありがとうございます。
➡️ディベロッパーツールのコンソールエラーを使い慣れていなかった事
が今回、明白になりました。
・表示されたエラー：Uncaught TypeError: $(...).animate is not a function
・原因：jQueryのslim版？を使用しているのが原因だと分かりました。
前回使っていた、full版に切り替える事で解決いたしました！
助言、感謝いたします。
まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。
textの色の変更は、CSSの話だったのですね。
まずは、スタイルシートの読み込み順ですが、ライブラリ(今回の場合はbootstrap)のCSSよりも後に、自前のCSSファイルを記述する方が良いです。
あとは、「スタイルの適用状態」も、ブラウザの開発ツールで要素を選択することで確認できますので、一度見てみてください。恐らく自前のCSSをbootstrapのCSSが上書きしてしまっているのではないかなと思います。
kei344 申し訳ないです！
ただ今、解決済みにしました。
mix-peachさんのおしゃる通り、
bootstrapでcolor指定を行っていたため変更が利きませんでした！
今回は、
✅navbar-lightとカラー指定があることを見落としていました。
無事、変更したい色に変更する事ができました。
助言によって気づく事ができました！感謝いたします。
回答1件
0
自己解決
コンソールのエラーについては、mix-peachさんのおっしゃる通りエラーを調べて解決しました！
ありがとうございます。
➡️ディベロッパーツールのコンソールエラーを使い慣れていなかった事
が今回、明白になりました。
・表示されたエラー：Uncaught TypeError: $(...).animate is not a function
・原因：jQueryのslim版？を使用しているのが原因だと分かりました。
前回使っていた、full版に切り替える事で解決いたしました！
投稿2019/12/04 05:57
総合スコア10
あなたの回答
tips
プレビュー
