特定の位置までスクロールすると、animate scrollTopを利用して移動させたいが、その位置から動かない

特定の位置までスクロールすると、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件

今の状態は
一定以上下にスクロールする
animate scrollTop
ゆっくり上へスクロール
上への移動量が足りないので
ゆっくり上へスクロール
上への移動量が足りない...の繰り返しでロックしたような状態です

JavaScript
1    $("html, body").animate({scrollTop:0}, speeds, "swing");

これでtarget - $(window).height()以下になれば自動スクロールで上まで移動します。
あとはこの値が妥当かは判断して下さい

投稿2020/09/19 07:00

kuma_kuma_

総合スコア2506

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

特定の位置までスクロールすると、animate scrollTopを利用して移動させたいが、その位置から動かない

関連した質問