Q&A
特定の位置までスクロールすると、animate scrollTopを利用して移動させたいが、その位置から動かないので、どなたかおわかりになるかたいらっしゃいますでしょうか？
jQuery
1<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 2<script> 3 $(function(){ 4 $(window).scroll(function (){ 5 $("#about").each(function() { 6 var Ids = '.about'; 7 var target = $(Ids).offset().top; 8 var position = target - $(window).height(); 9 if($(window).scrollTop() > position ){ 10 var e = $('header').innerHeight(); 11 var headerHights = e; 12 var speeds = 550; 13 var objs = $(this); 14 var positions = objs.offset().top-headerHights; 15 $("html, body").animate({scrollTop:positions}, speeds, "swing"); 16 return false; 17 } 18 }); 19 }); 20 }); 21</script>
html
1<header style="height: 170px;"> 2<nav> 3<ul style="display: flex; justify-content: space-between;"> 4<li>NAV01</li> 5<li>NAV02</li> 6<li>NAV03</li> 7<li>NAV04</li> 8</ul> 9</header> 10 <section> 11 <article style="height: 1800px;"> 12 13 </article> 14 <article class="about" id="about" style="height: 1800px;"> 15 aboutコンテンツ<br> 16<br> 17<br> 18<br> 19<br> 20<br> 21<br> 22<br> 23<br> 24<br> 25<br> 26<br> 27<br> 28<br> 29<br> 30<br> 31<br> 32<br> 33<br> 34<br> 35<br> 36 aboutコンテンツ 37<br> 38<br> 39<br> 40<br> 41<br> 42<br> 43<br> 44<br> 45<br> 46<br> 47<br> 48<br> 49<br> 50<br> 51<br> 52<br> 53<br> 54<br> 55<br> 56<br> 57<br> 58<br> 59<br> 60<br> 61<br> 62<br> 63<br> 64<br> 65<br> 66<br> 67<br> 68<br> 69<br> 70<br> 71<br> 72<br> 73<br> 74<br> 75 76 </article> 77 </section>
回答1件
0
今の状態は
一定以上下にスクロールする
animate scrollTop
ゆっくり上へスクロール
上への移動量が足りないので
ゆっくり上へスクロール
上への移動量が足りない...の繰り返しでロックしたような状態です
JavaScript
1 $("html, body").animate({scrollTop:0}, speeds, "swing");
これでtarget - $(window).height()以下になれば自動スクロールで上まで移動します。
あとはこの値が妥当かは判断して下さい
投稿2020/09/19 07:00
総合スコア2506
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。