ページ内リンクを押しても１つしか反応しない

ページ内リンクを押しても１つしか反応しません。
pc画面ではハンバーガーメニューは非表示にして、ヘッダーにリンクを載せています。
Aboutのみ正常に動くのですが、それ以外は反応がありません。
どこが原因か分からないため、ご教授願います。
CSSは途中省略しているため、不足があれば指摘お願いします。

html
1<body>
2  <div class="contents">
3  <!--ヘッダー-->
4<div class="header">
5  <div class ="header-logo">クリ★スタ</div>
6  <div class="header-list">
7    <ul>
8      <li>
9       <a href="#desa" style="text-decoration:none;">About</a>
10      </li>
11      <li>
12        <a href="#services" style="text-decoration:none;">Service</a>
13      </li>
14      <li>
15        <a href="#newses" style="text-decoration:none;">News</a>
16      </li>
17      <li>
18        <a href="#contacts" style="text-decoration:none;">Contact</a>
19      </li>
20      </ul>
21  </div>
22
23<!-- ハンバーガーメニュー部分 -->
24<div class="drawer" id="burger">
25
26  <!-- ハンバーガーメニューの表示・非表示を切り替えるチェックボックス -->
27  <input type="checkbox" id="drawer-check" class="drawer-hidden" >
28
29  <!-- ハンバーガーアイコン -->
30  <label for="drawer-check" class="drawer-open"><span></span></label>
31
32  <!-- メニュー -->
33  <nav class="drawer-content">
34    <ul class="drawer-list" id="humber">
35      <li class="drawer-item">
36        <a href="#desa">About</a>
37      </li><!-- /.drawer-item -->
38      <li class="drawer-item">
39        <a href="#services">Service</a>
40      </li><!-- /.drawer-item -->
41      <li class="drawer-item">
42        <a href="#newses">news</a>
43      </li><!-- /.drawer-item -->
44      <li class="drawer-item">
45        <a href="#contacts">Contact</a>
46      </li><!-- /.drawer-item -->
47
48    </ul><!-- /.drawer-list -->
49  </nav>
50</div>
51</div>
52
53<div class="top-wrapper">
54  <div class="title">
55    <h1>Cresta.Design.</h1>
56  </div>
57</div>
58
59
60<!-- コンテンツ -->
61<div class="body-wrapper">
62 <div class="about" id="desa">
63   <h3>About</h3>
64   <h2>ミニマルで<br>洗練されたデザインを。</h2>
65   <p>近年、ミニマルなデザインが流行しています。そこで弊社では、クライアント企業様新規サービス等の課題に対してミニマルで洗練されたデザインを実現させることで解決のサポートを致します。もちろん全てのサービスにおいてミニマルなデザインが課題解決になるわけではないので、課題や今後のサービスの展開等しっかりとヒアリングを行なった上でご提案させて頂きます。</p>
66 </div>
67
68 <!-- サービス -->
69 <div class="service" id="services">
70   <h3>Service</h3>
71   <div class="contents">
72     <img src="img/service-image@2x.jpg" class="camera">
73     <h2>リリース時のサポートで<br>サービスのブランディングを</h2>
74     <p>弊社では、リリース時もサポートさせて頂きます。プレスリリース用のサイトや動画制作を通して、サービスのブランディングを行わせて頂きます。</p>
75  </div>
76 </div>
77
78  <div class="suport">
79    <img src="img/service-image02@2x.jpg">
80    <h2>リリース後のサポートで<br>効果を最大化させる</h2>
81    <p>弊社では、リリース後もサポートさせて頂きます。サービスはリリース後に様々な課題にぶつかります。そこでクライアント様と一緒に改善を行うことで、デザインの効果を最大化させます。</p>
82  </div>
83
84      <!-- ニュース -->
85 <div class="news">
86
87    <div class="news-title" id="newses">
88        <h3>News</h3>
89    </div>
90
91
92      <div class="photos">
93        <div class="photo">
94          <img src="img/card-image1@2x.jpg">
95          <p class="text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
96        </div>
97
98        <div class="photo">
99          <img src="img/card-image2@2x.jpg">
100          <p class="text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
101        </div>
102
103        <div class="photo">
104          <img src="img/card-image3@2x.jpg">
105          <p class="text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
106        </div>
107      </div>
108    
109    </div>
110      <!--ニュース-->
111
112      <!-- お問い合わせ -->
113<div class="contact-form" id="contacts">
114 <h3>お問い合わせ</h3>
115
116 <div class="form">
117    <p>担当者名</p>
118    <input>
119
120    <p>電話番号</p>
121    <input>
122
123    <p>メールアドレス</p>
124    <input>
125
126    <p>お問い合わせ内容</p>
127    <textarea></textarea>
128 </div>
129
130 <div class="btn">
131   <a href="#" class="submit">送信</a>
132 </div>
133
134
135</div>
136
137</div>
138
139<!-- フッター -->
140<footer>
141  <h3>ask.nmt</h3>
142</footer>
143</div>
144
145<!-- jQueryの読み込み-->
146<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
147<script src="ask.js"></script>
148
149</body>
150

css
1body { 
2  font-family: "Noto Sans JP"; 
3  height: 100%;
4  width: 100%;
5  margin: 0;
6  padding: 0;
7}
8html {
9  height: 100%;
10}
11
12.contents {
13  position: relative; 
14  width: 100%; 
15  height: auto !important; 
16  min-height: 100%;
17  padding: 0; 
18}
19
20.header-logo {
21  float: left;
22  margin-left: 100px;
23  font-size: 20px;
24  margin-top: 15px;
25  padding: 0;
26} 
27
28.header-list ul {
29  padding-top: 0;
30  margin-right: 80px;
31  margin: 0;
32  padding: 0;
33  display: flex;
34  justify-content: flex-end;
35}
36
37.header-list li {
38  margin-right: 50px;
39  margin-top: 20px;
40  list-style: none;
41}
42
43.header-list a {
44  color: white;
45}
46
47.header {
48  color: white;
49  background-color: black;
50  height: 60px;
51  border-bottom: solid 2px white;
52  padding:0;
53  margin: 0;
54  width: 100%;
55}
56
57.top-wrapper {
58  background-image: url(img/fv-bgi@2x.jpg);
59  color: white;
60  height: 720px;
61  display: flex;
62  justify-content: center;
63  align-items: center;
64  width: 100%;
65  background-size: cover;
66}
67
68.title h1 {
69  border: 1px solid white;
70  padding: 20px 90px;
71}
72
73/* チェックボックスは非表示に */
74.drawer-hidden {
75  display: none;
76}
77
78/* ハンバーガーアイコンの設置スペース */
79.drawer-open {
80  display: flex;
81  height: 60px;
82  width:  30%;
83  justify-content: center;
84  align-items: center;
85  position: relative;
86  z-index: 100;/* 重なり順を一番上に */
87  cursor: pointer;
88  float: right;
89  z-index: 100;
90  position: fixed;
91  top: 0px;
92  right: 0px;
93}
94
95/* ハンバーガーメニューのアイコン */
96.drawer-open span,
97.drawer-open span:before,
98.drawer-open span:after {
99  display: hide;
100}
101
102/* 三本線のうち一番上の棒の位置調整 */
103.drawer-open span:before {
104  bottom: 8px;
105}
106
107/* 三本線のうち一番下の棒の位置調整 */
108.drawer-open span:after {
109  top: 8px;
110}
111
112/* アイコンがクリックされたら真ん中の線を透明にする */
113#drawer-check:checked ~ .drawer-open span {
114  background: rgba(255, 255, 255, 0);
115}
116
117/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
118#drawer-check:checked ~ .drawer-open span::before {
119  bottom: 0;
120  transform: rotate(45deg);
121}
122
123#drawer-check:checked ~ .drawer-open span::after {
124  top: 0;
125  transform: rotate(-45deg);
126}
127  
128/* メニューのデザイン*/
129.drawer-content {
130  width: 100%;
131  height: 100%;
132  position: fixed;
133  top: 0;
134  left: 100%;/* メニューを画面の外に飛ばす */
135  z-index: 99;
136  background: black;
137  transition: .5s;
138  text-align: center;
139  padding-top: 100px;
140}
141
142.drawer-content ul {
143  list-style: none;
144}
145
146.drawer-content a {
147  color: white;
148}
149
150/* アイコンがクリックされたらメニューを表示 */
151@media (max-width: 700px){
152#drawer-check:checked ~ .drawer-content {
153  left: 0;/* メニューを画面に入れる */
154}
155}
156/* チェックボックスは非表示に */
157.drawer-hidden {
158  display: none;
159}
160
161.body-wrapper {
162  height: 100%;
163  max-width: 1700px;
164  width: 70%;
165  margin: 0 auto;
166}
167
168.about h3 {
169  text-align: center; 
170  margin-top: 80px;
171  margin-bottom: 80px;
172  font-size: 30px;
173}
174
175
176.about p {
177  display: inline-block;
178  margin-top: 50px;
179  line-height: 40px;
180}
181
182.service {
183  height: 300px;
184}
185
186.service h3 {
187  text-align: center; 
188  margin-top: 80px;
189  margin-bottom: 80px;
190  font-size: 30px;
191}
192
193.camera {
194  margin-top: 10px;
195  float: left;
196  margin-right: 80px;
197  width: 50%;
198}
199
200.contents h2 {
201  margin-top: 80px;  
202}
203
204.contents p {
205  line-height: 30px;
206}
207
208 .suport {
209   height: 400px;
210 }
211
212.suport img {
213  float: right;
214  width: 50%;
215  margin-left: 80px;
216}
217
218.suport h2 {
219  margin-top: 180px;
220}
221
222.suport p {
223  width: 80%;
224}
225
226/*ニュース*/
227.news-title h3 {
228  text-align: center;
229  font-size: 30px;
230  padding-bottom: 40px;
231}
232.photos {
233  display: flex;
234  justify-content: space-between;
235  margin: 0 auto;
236}
237.photo {
238  width: 30%;
239  box-shadow: 0px 0px 6px rgba(27, 19, 16, 0.4);
240
241}
242.photo img {
243  display: block;
244  width: 100%
245}
246
247.photo p {
248  margin: 0 auto;
249  line-height: 35px;
250  font-weight: border;
251  padding:10px 30px;
252  font-size: 15px;
253}
254
255/*こんたくと*/
256.contact-form h3{
257  padding-top: 130px;
258  text-align: center;
259  font-size: 25px;
260} 
261
262.contact-form {
263  padding-bottom: 60px;
264}
265
266.form {
267  text-align: center;
268}
269
270.form p{
271  margin-bottom: 5px;
272  text-align: left;
273  display: inline-block;
274  width: 70%
275}
276
277input {
278  height: 20px;
279  width: 70%;
280}
281
282textarea {
283  height: 150px;
284  width: 70%;
285  margin-bottom: 60px;
286}
287
288.submit {
289  background-color: black;
290  color: white;
291  padding: 20px 90px;
292  border-radius: 40px;
293  font-size: 20px!important;
294}
295
296.btn {
297  text-align: center;
298  padding-bottom: 50px;
299}
300
301a {
302  text-decoration: none; 
303}
304
305footer {
306  color: white;
307  background-color: black;
308  height: 40px;
309  position: absolute;
310  width: 100%;
311  bottom: 0;
312}
313
314footer h3 {
315  text-align: center;
316  font-weight: normal;
317  font-size: 10px;
318}
319
320```jQuery
321$(function(){
322  $('a[href^="#"]').click(function(){
323    var speed = 1000;
324    var href= $(this).attr("href");
325    var target = $(href == "#" || href == "" ? 'html' : href);
326    $("html, body").animate(
327        {scrollTop: target.offset().top}, speed, "swing");
328    return false;
329  });
330});
331
332$('#humber a[href]').on('click', function(event) {
333  $('.drawer-open').trigger('click');
334});

Lhankor_Mhy

2021/03/12 09:47

ご提示のコードを試してみましたが、問題が再現しませんでした。

azaz_wb

2021/03/12 10:20

pc用の部分のCSSを追記しました。スクロール可能でしょうか。

kei344

2021/03/15 04:48

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

azaz_wb

2021/03/21 14:53

すみません。対応します。

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

回答1件

ベストアンサー

こんにちは。
質問に掲載された内容をそのままcodepenにつっこんでみましたが、ContactもNewsもServiceもきちんとスクロールしました。
（HTMLは最後divの閉じタグだけ足してます）
サンプル

質問外の要素が何かしら関係していると思いますので、質問外の要素をちょっとずつ足していって、どこでうまくいかなくなるのか、問題の切り分けをしてみるのが良さそうです。

あとはIDEから「ulにaぶちこまないで！」と怒られたので、1個ずつliに入れましょう。

投稿2021/03/12 09:42

mai1210

総合スコア272

azaz_wb

2021/03/12 10:21

pc用のCSSを追記しました。もしよろしければご確認よろしくお願いします。

mai1210

2021/03/12 10:47

パッと見ですが、.drawer が上に重なっていて　.header-list a がクリックできないのかな？と思いました。「ページ幅が広い場合は .drawer を display: none;　にする」で解消しないでしょうか。また、.header-list a はｆloat: right; を使わず、ul　に display: flex; をかける形で横並びにした方が良いです。floatだと高さの確保や回り込みを考慮しなくてはいけないですが、flexだと気にしなくて良いので取り扱いが楽です。 https://rabico.dev/flexbox-demo/

azaz_wb

2021/03/12 13:19

.header-list aをflexにしたらリンクできました！ .drawerもdisplay:none;を指定しました。 floatをよく使っていたので、flexを使用するように心がけようと思います。ありがとうございました。

azaz_wb

2021/03/12 13:49

何度もすみません。要素の並び替えをしたら反応しなくなってしまいました。 Aboutは反応します。他に考えられる原因はありますでしょうか。

azaz_wb

2021/03/12 15:45

ハンバーガーメニューの表示を調整したらできました。 li要素がヘッダーの下になってしまったので、調整します。何度も失礼しました。

mai1210

2021/03/15 00:45

解決されたようで良かったです！