質問編集履歴

2

誤字

2019/09/21 07:14

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -394,26 +394,6 @@
394
394
 
395
395
 
396
396
 
397
- console.log($a);
398
-
399
- console.log($b);
400
-
401
- console.log($c);
402
-
403
- console.log(aTop);
404
-
405
- console.log(a_contentTop);
406
-
407
- console.log(bTop);
408
-
409
- console.log(b_contentTop);
410
-
411
- console.log(cTop);
412
-
413
- console.log(c_contentTop);
414
-
415
-
416
-
417
397
  $('#next_a').on('click', function() {
418
398
 
419
399
  $('body,html').animate({

1

追記

2019/09/21 07:14

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -161,3 +161,371 @@
161
161
  コード
162
162
 
163
163
  ```
164
+
165
+
166
+
167
+ ### ※追記
168
+
169
+
170
+
171
+ ```html
172
+
173
+ <!DOCTYPE html>
174
+
175
+ <html lang="ja">
176
+
177
+
178
+
179
+ <head>
180
+
181
+ <meta charset="utf-8">
182
+
183
+ <title>TEST</title>
184
+
185
+
186
+
187
+ <style>
188
+
189
+ body {
190
+
191
+ margin: 0;
192
+
193
+ }
194
+
195
+
196
+
197
+ .btn,
198
+
199
+ .first_btn {
200
+
201
+ position: relative;
202
+
203
+ }
204
+
205
+
206
+
207
+ #next_a,
208
+
209
+ #next_b,
210
+
211
+ #next_c,
212
+
213
+ #top {
214
+
215
+ font-size: 25px;
216
+
217
+ cursor: pointer;
218
+
219
+ position: absolute;
220
+
221
+ bottom: 50px;
222
+
223
+ left: 50%;
224
+
225
+ margin-left: -25px;
226
+
227
+ }
228
+
229
+
230
+
231
+ .title,
232
+
233
+ .content {
234
+
235
+ display: flex;
236
+
237
+ justify-content: center;
238
+
239
+ align-items: center;
240
+
241
+ }
242
+
243
+
244
+
245
+ .title {
246
+
247
+ font-size: 25px;
248
+
249
+ background: #000;
250
+
251
+ color: #fff;
252
+
253
+ }
254
+
255
+
256
+
257
+ .content {
258
+
259
+ font-size: 20px;
260
+
261
+ background: #eee;
262
+
263
+ }
264
+
265
+ </style>
266
+
267
+
268
+
269
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
270
+
271
+ <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
272
+
273
+
274
+
275
+ </head>
276
+
277
+
278
+
279
+ <body>
280
+
281
+
282
+
283
+ <div class="first_btn">
284
+
285
+ <div id="next_a">次へ</div>
286
+
287
+ </div>
288
+
289
+ <section id="section_a">
290
+
291
+ <div class="title">
292
+
293
+ <h2>a</h2>
294
+
295
+ </div>
296
+
297
+ <div class="content">
298
+
299
+ <h3>ここに内容</h3>
300
+
301
+ </div>
302
+
303
+ <div class="btn">
304
+
305
+ <div id="next_b">次へ</div>
306
+
307
+ </div>
308
+
309
+ </section>
310
+
311
+ <section id="section_b">
312
+
313
+ <div class=title>
314
+
315
+ <h2>b</h2>
316
+
317
+ </div>
318
+
319
+ <div class="content">
320
+
321
+ <h2>ここに内容</h2>
322
+
323
+ </div>
324
+
325
+ <div class="btn">
326
+
327
+ <div id="next_c">次へ</div>
328
+
329
+ </div>
330
+
331
+ </section>
332
+
333
+ <section id="section_c">
334
+
335
+ <div class="title">
336
+
337
+ <h2>c</h2>
338
+
339
+ </div>
340
+
341
+ <div class="content">
342
+
343
+ <h2>ここに内容</h2>
344
+
345
+ </div>
346
+
347
+ <div class="btn">
348
+
349
+ <div id="top">戻る</div>
350
+
351
+ </div>
352
+
353
+ </section>
354
+
355
+
356
+
357
+ <script>
358
+
359
+ var resizeTimer = null;
360
+
361
+ $(window).on('load resize', function() {
362
+
363
+ clearTimeout(resizeTimer);
364
+
365
+ resizeTimer = setTimeout(function() {
366
+
367
+
368
+
369
+ var hSize = $(this).height();
370
+
371
+ $('.first_btn,.title,.content').height(hSize);
372
+
373
+
374
+
375
+
376
+
377
+ var $a = $('#section_a'),
378
+
379
+ $b = $('#section_b'),
380
+
381
+ $c = $('#section_c'),
382
+
383
+ aTop = $a.offset().top,
384
+
385
+ a_contentTop = $a.find('.content').offset().top,
386
+
387
+ bTop = $b.offset().top,
388
+
389
+ b_contentTop = $b.find('.content').offset().top,
390
+
391
+ cTop = $c.offset().top,
392
+
393
+ c_contentTop = $c.find('.content').offset().top;
394
+
395
+
396
+
397
+ console.log($a);
398
+
399
+ console.log($b);
400
+
401
+ console.log($c);
402
+
403
+ console.log(aTop);
404
+
405
+ console.log(a_contentTop);
406
+
407
+ console.log(bTop);
408
+
409
+ console.log(b_contentTop);
410
+
411
+ console.log(cTop);
412
+
413
+ console.log(c_contentTop);
414
+
415
+
416
+
417
+ $('#next_a').on('click', function() {
418
+
419
+ $('body,html').animate({
420
+
421
+ scrollTop: aTop
422
+
423
+ }, 800, autoscroll_a);
424
+
425
+ });
426
+
427
+
428
+
429
+ $('#next_b').on('click', function() {
430
+
431
+ $('body,html').animate({
432
+
433
+ scrollTop: bTop
434
+
435
+ }, 800, autoscroll_b);
436
+
437
+ });
438
+
439
+
440
+
441
+ $('#next_c').on('click', function() {
442
+
443
+ $('body,html').animate({
444
+
445
+ scrollTop: cTop
446
+
447
+ }, 800, autoscroll_c);
448
+
449
+ });
450
+
451
+
452
+
453
+ $('#top').on('click', function() {
454
+
455
+ $('body,html').animate({
456
+
457
+ scrollTop: 0
458
+
459
+ }, 800);
460
+
461
+ });
462
+
463
+
464
+
465
+ function autoscroll_a() {
466
+
467
+ setTimeout(function() {
468
+
469
+ $('body,html').animate({
470
+
471
+ scrollTop: a_contentTop
472
+
473
+ }, 300);
474
+
475
+ }, 800);
476
+
477
+ }
478
+
479
+
480
+
481
+ function autoscroll_b() {
482
+
483
+ setTimeout(function() {
484
+
485
+ $('body,html').animate({
486
+
487
+ scrollTop: b_contentTop
488
+
489
+ }, 300);
490
+
491
+ }, 800);
492
+
493
+ }
494
+
495
+
496
+
497
+ function autoscroll_c() {
498
+
499
+ setTimeout(function() {
500
+
501
+ $('body,html').animate({
502
+
503
+ scrollTop: c_contentTop
504
+
505
+ }, 300);
506
+
507
+ }, 800);
508
+
509
+ }
510
+
511
+
512
+
513
+ }, 200);
514
+
515
+ });
516
+
517
+ </script>
518
+
519
+ </body></html>
520
+
521
+ コード
522
+
523
+ ```
524
+
525
+
526
+
527
+ ※最初のjQueryのコードを少し書き変えました。(基本的なところは変えていません)
528
+
529
+ 上記のコードを見て頂けると分るかと思うのですが、
530
+
531
+ 質問の内容の通り、resizeするとスクロールの挙動がおかしくなります。