###前提・実現したいこと
下記のソースについて質問です。#Area1内にあるアンカータグをクリックすると画面が
「#Area2」と「#Area3」へスクロールするのですが、
スクロールをする前にブラウザの大きさを変更すると、変更する前と比べ円滑にスクロールしなくなりカクカクしながらスクロールしてしまいます。なぜ、ブラウザの大きさを変えるとカクカクするようになるのでしょうか。
また、アンカーのhrefは、#Area2で最適なのでしょうか。
###該当のソースコード
html
1<!-- 最上部 --> 2<div id="Area0"> 3 4</div> 5<!-- ★ブラウザの大きさと連動するボックス(ファーストビュー) --> 6<div id="Area1"> 711111111111111111 8 9<a href="#Area2">scroll</a> 10 11 12</div> 13<div id="Area2"> 142222222222222222 15</div> 16<div id="Area3"> 173333333333333333 18</div>
css
1#Area0 { 2 background: gray; 3 width: 100%; 4 height: 70px; 5 position: fixed; 6 top: 0; 7 left: 0; 8 z-index: 1; 9} 10#Area1 { 11 background: lightpink; 12 width: 100%; 13 position: fixed; 14 z-index: 0; 15} 16#Area2 { 17 background: blue; 18 width: 100%; 19 height: 450px; 20 position: relative; 21} 22#Area3 { 23 background: green; 24 width: 100%; 25 position: relative; 26 height: 450px; 27} 28
javascript
1$(function() { 2 $(window).on('resize', function() { 3 var h = $(window).height(); 4 $('#Area1').css({'height': h, 'margin-top': 70}); 5 console.log('高さ:',h); 6 7 $('#Area2').css('top', h); 8 $('#Area3').css('top', h); 9 10//■スクロールボタン 11var position = $('#Area2').offset().top; 12console.log('#Area2とブラウザの幅:', position); 13$('#Area1 a').on('click', function() { 14 $('html,body').animate({ 15 scrollTop: position 16 }, { 17 queue : false, 18 duration: 3000 19 }); 20}); 21 }).trigger('resize'); 22 23}); 24
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。