teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問ハンバーガーメニューを開く度メニュートップ位置に戻したい

編集履歴

質問編集履歴

1

再現できないほど足りなかった記述など加筆修正致しました。

2021/11/07 06:56

投稿

maronteratail
maronteratail

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,8 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- 小さい画面で、よくあるハンバーガーメニューを開きスクロールすると、一旦メニューを閉じてまたを開くと前回スクロールしたままの位置で表示されます。
3
+ 高さを500pxほどの小さい画面で、よくあるハンバーガーメニューを開きメニューを一番下までスクロールしMNU8をクリックし、再度メニューを開くと前回メニュー内でスクロールした一番下のままの位置で表示されます。
4
-
4
+
5
- メニューを開くたびにメニューの一番上に戻すようにしたいです。
5
+ メニューを開くたびにTOPが一番上まで来るような、メニュー内を一番上に戻すようにしたいです。
6
6
 
7
7
 
8
8
 
@@ -18,61 +18,105 @@
18
18
 
19
19
  <header id="ly_header">
20
20
 
21
- <div class="ly_header_inner">
22
-
23
- <div class="el_headerNav_btn el_headerNav_btn__open"></div>
24
-
25
- <div class="bl_panel">
26
-
27
- <div class="bl_panel_inner">
28
-
29
- <div class="el_headerNav_btn el_headerNav_btn__close"></div>
30
-
31
- <nav>
32
-
33
- <ul class="bl_headerNav">
34
-
35
- <li class="bl_headerNav_item blurTrigger">
36
-
37
- <a href="#" class="bl_headerNav_link">TOP</a>
38
-
39
- </li>
40
-
41
- <li class="bl_headerNav_item blurTrigger">
42
-
43
- <a href="#" class="bl_headerNav_link">ABOUT</a>
44
-
45
- </li>
46
-
47
- <li class="bl_headerNav_item blurTrigger">
48
-
49
- <a href="#" class="bl_headerNav_link">MENU</a>
50
-
51
- </li>
52
-
53
- <li class="bl_headerNav_item blurTrigger">
54
-
55
- <a href="#" class="bl_headerNav_link">CONTACT</a>
56
-
57
- </li>
58
-
59
- <li class="bl_headerNav_item blurTrigger">
60
-
61
- <a href="#" class="bl_headerNav_link">BLOG</a>
62
-
63
- </li>
64
-
65
- </ul>
66
-
67
- </nav>
68
-
69
- </div><!--.bl_panel_inner-->
70
-
71
- </div><!--.bl_panel-->
72
-
73
- </div><!--.ly_header_inner-->
74
-
75
- </header>
21
+ <div class="ly_header_inner">
22
+
23
+ <div class="el_headerNav_btn el_headerNav_btn__open">open</div>
24
+
25
+ <div class="bl_panel">
26
+
27
+ <div class="bl_panel_inner">
28
+
29
+ <div class="el_headerNav_btn el_headerNav_btn__close">close</div>
30
+
31
+ <nav>
32
+
33
+ <ul class="bl_headerNav">
34
+
35
+ <li class="bl_headerNav_item blurTrigger">
36
+
37
+ <a href="#top" class="bl_headerNav_link">TOP</a>
38
+
39
+ </li>
40
+
41
+ <li class="bl_headerNav_item blurTrigger">
42
+
43
+ <a href="#menu1" class="bl_headerNav_link">MENU1</a>
44
+
45
+ </li>
46
+
47
+ <li class="bl_headerNav_item blurTrigger">
48
+
49
+ <a href="#menu2" class="bl_headerNav_link">MENU2</a>
50
+
51
+ </li>
52
+
53
+ <li class="bl_headerNav_item blurTrigger">
54
+
55
+ <a href="#menu3" class="bl_headerNav_link">MENU3</a>
56
+
57
+ </li>
58
+
59
+ <li class="bl_headerNav_item blurTrigger">
60
+
61
+ <a href="#menu4" class="bl_headerNav_link">MENU4</a>
62
+
63
+ </li>
64
+
65
+ <li class="bl_headerNav_item blurTrigger">
66
+
67
+ <a href="#menu5" class="bl_headerNav_link">MENU5</a>
68
+
69
+ </li>
70
+
71
+ <li class="bl_headerNav_item blurTrigger">
72
+
73
+ <a href="#menu6" class="bl_headerNav_link">MENU6</a>
74
+
75
+ </li>
76
+
77
+ <li class="bl_headerNav_item blurTrigger">
78
+
79
+ <a href="#menu7" class="bl_headerNav_link">MENU7</a>
80
+
81
+ </li>
82
+
83
+ <li class="bl_headerNav_item blurTrigger">
84
+
85
+ <a href="#menu8" class="bl_headerNav_link">MENU8</a>
86
+
87
+ </li>
88
+
89
+ </ul>
90
+
91
+ </nav>
92
+
93
+ </div><!--.bl_panel_inner-->
94
+
95
+ </div><!--.bl_panel-->
96
+
97
+ </div><!--.ly_header_inner-->
98
+
99
+ </header>
100
+
101
+
102
+
103
+ <div class="content" id="top">TOP</div>
104
+
105
+ <div class="content" id="menu1">MENU1</div>
106
+
107
+ <div class="content" id="menu2">MENU2</div>
108
+
109
+ <div class="content" id="menu3">MENU3</div>
110
+
111
+ <div class="content" id="menu4">MENU4</div>
112
+
113
+ <div class="content" id="menu5">MENU5</div>
114
+
115
+ <div class="content" id="menu6">MENU6</div>
116
+
117
+ <div class="content" id="menu7">MENU7</div>
118
+
119
+ <div class="content" id="menu8">MENU8</div>
76
120
 
77
121
  ```
78
122
 
@@ -80,90 +124,232 @@
80
124
 
81
125
  ```css
82
126
 
127
+ body.fixed {
128
+
129
+ position: fixed;
130
+
131
+ width: 100%;
132
+
133
+ height: 100%;
134
+
135
+ left: 0;
136
+
137
+ }
138
+
83
139
  .bl_panel {
84
140
 
85
- width: 100%;
86
-
87
- height: 100vh;
88
-
89
- background-color: rgba(266,162,172,0.8);
90
-
91
- position: fixed;
92
-
93
- top: 0;
94
-
95
- left: 0;
96
-
97
- transition: all .5s;
98
-
99
- opacity: 0;
100
-
101
- z-index: -1;
141
+ width: 100%;
142
+
143
+ height: 100vh;
144
+
145
+ background-color: rgba(266,162,172,0.8);
146
+
147
+ position: fixed;
148
+
149
+ top: 0;
150
+
151
+ left: 0;
152
+
153
+ transition: all .5s;
154
+
155
+ opacity: 0;
156
+
157
+ z-index: -1;
158
+
159
+ }
160
+
161
+ .bl_panel.panelactive {
162
+
163
+ opacity: 1;
164
+
165
+ z-index: 999;
166
+
167
+ }
168
+
169
+ .bl_panel.panelactive .bl_panel_inner {
170
+
171
+ position: fixed;
172
+
173
+ top: 0;
174
+
175
+ left: 0;
176
+
177
+ width: 100%;
178
+
179
+ height: 100vh;
180
+
181
+ overflow: auto;
182
+
183
+ -webkit-overflow-scrolling: touch;
184
+
185
+ }
186
+
187
+ .bl_panel_inner nav {
188
+
189
+ z-index: 999;
190
+
191
+ width: 100%;
192
+
193
+ }
194
+
195
+ .bl_headerNav {
196
+
197
+ padding: 20px;
198
+
199
+ }
200
+
201
+ header#ly_header {
202
+
203
+ width: 100%;
204
+
205
+ height: 100px;
206
+
207
+ z-index: 999;
208
+
209
+ position: fixed; /* 上下スクロールでヘッダーの表示・非表示するアニメーション用 */
210
+
211
+ top: 0;
212
+
213
+ left: 0;
214
+
215
+ background: #333;
216
+
217
+ transition: all .5s;
218
+
219
+ }
220
+
221
+ header#ly_header.is-hide {
222
+
223
+ transform: translateY(-100%);
224
+
225
+ }
226
+
227
+ .el_headerNav_btn.el_headerNav_btn__open {
228
+
229
+ width: 100px;
230
+
231
+ height: 100px;
232
+
233
+ background: #ccc;
234
+
235
+ }
236
+
237
+ .el_headerNav_btn.el_headerNav_btn__close {
238
+
239
+ width: 100px;
240
+
241
+ height: 100px;
242
+
243
+ background: #0ff;
244
+
245
+ }
246
+
247
+ .content {
248
+
249
+ height: 50vh;
250
+
251
+ }
252
+
253
+ .bl_headerNav_link {
254
+
255
+ font-size: 16px;
256
+
257
+ padding: 20px;
258
+
259
+ display: block;
260
+
261
+ }
262
+
263
+
264
+
265
+
266
+
267
+ ```
268
+
269
+
270
+
271
+
272
+
273
+ ```jquery
274
+
275
+ // 上下スクロールでヘッダーの表示・非表示するアニメーション用
276
+
277
+ var pos = 0;
278
+
279
+ function FixedAnime() {
280
+
281
+ var scroll = $(window).scrollTop();
282
+
283
+ var Header = $('#ly_header');
284
+
285
+ if ( scroll < pos || scroll < 200 ) {
286
+
287
+ Header.removeClass('is-hide');
288
+
289
+ } else {
290
+
291
+ Header.addClass('is-hide');
292
+
293
+ }
294
+
295
+ pos = scroll;
296
+
297
+ }
298
+
299
+
300
+
301
+ //　ハンバーガーメニュー
302
+
303
+ var scrollPosition;
304
+
305
+ $('.el_headerNav_btn__open').click(function(){
306
+
307
+ scrollPosition = $(window).scrollTop();
308
+
309
+ $('body').addClass('fixed').css({'top': -scrollPosition});
310
+
311
+ $('.bl_panel').addClass('panelactive');
312
+
313
+ });
314
+
315
+
316
+
317
+ $('.el_headerNav_btn__close, .bl_headerNav_link').click(function(){
318
+
319
+ $('body').removeClass('fixed').css({'top': 0});
320
+
321
+ window.scrollTo( 0 , scrollPosition );
102
322
 
103
323
 
104
324
 
105
- }
325
+ $('.bl_panel').removeClass('panelactive');
106
-
326
+
107
- .bl_panel.panelactive {
327
+ $('.bl_panel').scrollTop(0);
328
+
108
-
329
+ });
330
+
331
+
332
+
109
- opacity: 1;
333
+ // 関数まとめ
334
+
110
-
335
+ $(window).on('load', function() {
336
+
111
- z-index: 999;
337
+ FixedAnime();
112
-
338
+
113
- }
339
+ });
114
-
115
-
116
-
117
- .bl_panel.panelactive .bl_panel_inner {
340
+
118
-
119
- position: fixed;
341
+
120
-
121
- top: 0;
342
+
122
-
123
- left: 0;
343
+
124
-
125
- width: 100%;
344
+
126
-
127
- height: 100vh;
128
-
129
- overflow: auto;
130
-
131
- -webkit-overflow-scrolling: touch;
345
+ $(window).on('scroll', function() {
132
-
133
- }
346
+
134
-
135
- .bl_panel_inner nav {
136
-
137
- display: none;
138
-
139
- z-index: 999;
140
-
141
- width: 100%;
347
+ FixedAnime() ;
142
-
348
+
143
- }
349
+ });
144
350
 
145
351
  ```
146
352
 
147
-
148
-
149
-
150
-
151
- ```jquery
152
-
153
- $('.el_headerNav_btn__open').on('click', function() {
154
-
155
- $('.bl_panel').addClass('panelactive');
156
-
157
- });
158
-
159
- $('.el_headerNav_btn__close, .bl_headerNav_link').on('click', function() {
160
-
161
- $('.bl_panel').removeClass('panelactive');
162
-
163
- });
164
-
165
- ```
166
-
167
353
 
168
354
 
169
355
 
@@ -176,11 +362,9 @@
176
362
 
177
363
  ### 試したこと
178
364
 
179
-
180
-
181
- スムーズスクロールのようにanimateでscrollTop: 0だと機能せず.bl_panelのcssをtop: 0にしても意味ありませんでした。
182
-
183
- 自力でで調べましたが、メニューの下の要素をスクロールしても固定する方法しか出てこず、質問させていただきました。
365
+ 上記の通り$('.bl_panel').scrollTop(0);としました。
366
+
367
+ 高さ５００pxぐらいのブラウザ設定で、ハンバーガーメニュー内を一番下までスクロールしてMNU8をクリックし、再度メニューを開くと前回スクロールしたメニュー一番下のままで表示され、メニュー内のTOPが上に来ません。
184
368
 
185
369
  超初心者なので分かりづらかったら申し訳ございません。
186
370