Q&A
htmlも提示してもらえると、回答者が検証しやすくなります。
やりたい事
#next_aをクリックしたら**#section_aまでスクロールし、
0.8秒後に.content**まで自動でスクロールする。（bとcは省略）
という事をしたいのですが、以下のコードで一応できました。
しかし、画面の向きを変えresize後に上記の事をするとスクロールの挙動がおかしくなります。
コンソールで確認すると、どうやらresizeする前のスクロール位置とresize後のスクロール位置が交互に読み込まれているみたいです。
多分、resizeする度にoffset().topを取得すれば解決すると思うのですが、やり方が分かりません。
どのようにしたら良いでしょうか？
また、上記のほかに解決策があればそちらも教えて頂きたいです。
宜しくお願いします。
jQuery
1 2 var resizeTimer = null; 3 $(window).on('load resize', function () { 4 clearTimeout(resizeTimer); 5 resizeTimer = setTimeout(function () { 6 7 var hSize = $(this).height(); 8 $('.content').height(hSize); 9 10 var $a = $('#section_a'), 11 $b = $('#section_b'), 12 $c = $('#section_c'), 13 aTop = $a.offset().top, 14 a_contentTop = $a.find('.content').offset().top, 15 bTop = $b.offset().top, 16 b_contentTop = $b.find('.content').offset().top, 17 cTop = $c.offset().top, 18 c_contentTop = $c.find('.content').offset().top; 19 20 $('#next_a').on('click', function () { 21 $('body,html').animate({ 22 scrollTop: $a 23 }, 800, autoscroll_a); 24 }); 25 26 $('#next_b').on('click', function () { 27 $('body,html').animate({ 28 scrollTop: $b 29 }, 800, autoscroll_b); 30 }); 31 32 $('#next_c').on('click', function () { 33 $('body,html').animate({ 34 scrollTop: $c 35 }, 800, autoscroll_c); 36 }); 37 38 function autoscroll_a() { 39 setTimeout(function () { 40 $('body,html').animate({ 41 scrollTop: $a_contentTop 42 }, 300); 43 }, 800) 44 } 45 46 function autoscroll_b() { 47 setTimeout(function () { 48 $('body,html').animate({ 49 scrollTop: $b_contentTop 50 }, 300); 51 }, 800) 52 } 53 54 function autoscroll_c() { 55 setTimeout(function () { 56 $('body,html').animate({ 57 scrollTop: $c_contentTop 58 }, 300); 59 }, 800) 60 } 61 62 }, 200); 63コード
※追記
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <title>TEST</title> 7 8 <style> 9 body { 10 margin: 0; 11 } 12 13 .btn, 14 .first_btn { 15 position: relative; 16 } 17 18 #next_a, 19 #next_b, 20 #next_c, 21 #top { 22 font-size: 25px; 23 cursor: pointer; 24 position: absolute; 25 bottom: 50px; 26 left: 50%; 27 margin-left: -25px; 28 } 29 30 .title, 31 .content { 32 display: flex; 33 justify-content: center; 34 align-items: center; 35 } 36 37 .title { 38 font-size: 25px; 39 background: #000; 40 color: #fff; 41 } 42 43 .content { 44 font-size: 20px; 45 background: #eee; 46 } 47 </style> 48 49 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 50 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 51 52</head> 53 54<body> 55 56 <div class="first_btn"> 57 <div id="next_a">次へ</div> 58 </div> 59 <section id="section_a"> 60 <div class="title"> 61 <h2>a</h2> 62 </div> 63 <div class="content"> 64 <h3>ここに内容</h3> 65 </div> 66 <div class="btn"> 67 <div id="next_b">次へ</div> 68 </div> 69 </section> 70 <section id="section_b"> 71 <div class=title> 72 <h2>b</h2> 73 </div> 74 <div class="content"> 75 <h2>ここに内容</h2> 76 </div> 77 <div class="btn"> 78 <div id="next_c">次へ</div> 79 </div> 80 </section> 81 <section id="section_c"> 82 <div class="title"> 83 <h2>c</h2> 84 </div> 85 <div class="content"> 86 <h2>ここに内容</h2> 87 </div> 88 <div class="btn"> 89 <div id="top">戻る</div> 90 </div> 91 </section> 92 93 <script> 94 var resizeTimer = null; 95 $(window).on('load resize', function() { 96 clearTimeout(resizeTimer); 97 resizeTimer = setTimeout(function() { 98 99 var hSize = $(this).height(); 100 $('.first_btn,.title,.content').height(hSize); 101 102 103 var $a = $('#section_a'), 104 $b = $('#section_b'), 105 $c = $('#section_c'), 106 aTop = $a.offset().top, 107 a_contentTop = $a.find('.content').offset().top, 108 bTop = $b.offset().top, 109 b_contentTop = $b.find('.content').offset().top, 110 cTop = $c.offset().top, 111 c_contentTop = $c.find('.content').offset().top; 112 113 $('#next_a').on('click', function() { 114 $('body,html').animate({ 115 scrollTop: aTop 116 }, 800, autoscroll_a); 117 }); 118 119 $('#next_b').on('click', function() { 120 $('body,html').animate({ 121 scrollTop: bTop 122 }, 800, autoscroll_b); 123 }); 124 125 $('#next_c').on('click', function() { 126 $('body,html').animate({ 127 scrollTop: cTop 128 }, 800, autoscroll_c); 129 }); 130 131 $('#top').on('click', function() { 132 $('body,html').animate({ 133 scrollTop: 0 134 }, 800); 135 }); 136 137 function autoscroll_a() { 138 setTimeout(function() { 139 $('body,html').animate({ 140 scrollTop: a_contentTop 141 }, 300); 142 }, 800); 143 } 144 145 function autoscroll_b() { 146 setTimeout(function() { 147 $('body,html').animate({ 148 scrollTop: b_contentTop 149 }, 300); 150 }, 800); 151 } 152 153 function autoscroll_c() { 154 setTimeout(function() { 155 $('body,html').animate({ 156 scrollTop: c_contentTop 157 }, 300); 158 }, 800); 159 } 160 161 }, 200); 162 }); 163 </script> 164</body></html> 165コード
※最初のjQueryのコードを少し書き変えました。（基本的なところは変えていません）
上記のコードを見て頂けると分るかと思うのですが、
質問の内容の通り、resizeするとスクロールの挙動がおかしくなります。
申し訳ございません。
追記しておきます。
回答2件
0
ベストアンサー
HTMLの提示がないので検証はしてませんが、下記のような感じになるのでは。
HTMLの提示があったので、検証してみました。
元のコードをコピペして移動させただけでしたが、よく読んだらコード間違いが散見されたので修正しました。
これで、こちらの検証ではエラーなく動いてますが、これがご希望の動作かどうかは判断しかねます。
js
1$(function () { 2 var resizeTimer = null, 3 $a = $('#section_a'), 4 $b = $('#section_b'), 5 $c = $('#section_c'), 6 aTop, a_contentTop, bTop, b_contentTop, cTop, c_contentTop; 7 8 $('#next_a').on('click', function () { 9 $('body,html').animate({ 10 scrollTop: aTop 11 }, 800, autoscroll_a); 12 }); 13 14 $('#next_b').on('click', function () { 15 $('body,html').animate({ 16 scrollTop: bTop 17 }, 800, autoscroll_b); 18 }); 19 20 $('#next_c').on('click', function () { 21 $('body,html').animate({ 22 scrollTop: cTop 23 }, 800, autoscroll_c); 24 }); 25 26 function autoscroll_a() { 27 setTimeout(function () { 28 $('body,html').animate({ 29 scrollTop: a_contentTop 30 }, 300); 31 }, 800) 32 } 33 34 function autoscroll_b() { 35 setTimeout(function () { 36 $('body,html').animate({ 37 scrollTop: b_contentTop 38 }, 300); 39 }, 800) 40 } 41 42 function autoscroll_c() { 43 setTimeout(function () { 44 $('body,html').animate({ 45 scrollTop: c_contentTop 46 }, 300); 47 }, 800) 48 } 49 50 //位置取得 51 $(window).on('load resize', function () { 52 clearTimeout(resizeTimer); 53 resizeTimer = setTimeout(function () { 54 55 var hSize = $(this).height(); 56 $('.content').height(hSize); 57 aTop = $a.offset().top; 58 a_contentTop = $a.find('.content').offset().top; 59 bTop = $b.offset().top; 60 b_contentTop = $b.find('.content').offset().top; 61 cTop = $c.offset().top; 62 c_contentTop = $c.find('.content').offset().top; 63 64 }, 200); 65 }); 66});
load resize イベントでは位置取得のみにするようにすればいいかと。
投稿2019/09/21 07:03
編集2019/09/21 07:50総合スコア34073
ご回答ありがとうございます。
上記のコードを参考に、追記したコードを書き換えてみたのですがエラーが出ました。
エラー個所の記述を消していっても次から次にエラーが出てきていて、エラーの特定には至りませんでした。
ご回答ありがとうございます！
上記のコードで無事 動作確認が取れました。
ありがとうございます！
最後に一つお聞きしたいことがあるのですが、
$(function)の中の上部にあるこちらの変数
「aTop, a_contentTop, bTop, b_contentTop, cTop, c_contentTop;」
ですが、これは空の変数を先に作っておき、
$(window).on('load resize', function)で値を代入することで、
resize後の変数を$(function)と$(window).on('load resize', function)の両方で使えるようにするという事を行っているのでしょうか？
はい、そういう理解であっています。
ありがとうございます!
0
HTMLコードがないため確認できませんが、おそらく resize イベントのたびに click イベントのリスナを設定しているからだと思います。これは上書きされずに複数登録されますから、上手く動作しなくなるだろうと思います。
解決方法は、$('#next_a').onなどの部分を resize イベントリスナの外に出すことです。
投稿2019/09/21 00:32
総合スコア36946
ご回答ありがとうございます。
$('#next_a').onの部分を一式resizeイベントリスナ外に出しましたが、今度はresize時にoffset().topの値が変わらないという問題と、そもそものoffset().topの値がおかしくなるという問題がしまいました。
詳しくは追記の方で書かせえて頂きますので、もしよろしければ一度頂けれると助かります。
解決することができました。
ご回答いただきありがとうございます！
ご解決されて何よりです。
ありがとうございます^^
あなたの回答
tips
プレビュー
