ワンスクロールで次のエリアまでいくjs(jQuery)を組みたい

###前提・実現したいこと
ワンスクロールで次のエリアまでいくjs(jQuery)を組みたいと思いコーディングをしてみました。
作ったデモページはコチラです。

###該当のソースコード

html
1<body>
2<div id="visual">
3オレンジのエリアがワンスクロールで灰色のエリアまでスクロールします
4</div>
5
6<div id="nextbox" class="nextbox">
7	<p>次のボックスです<br><br><br><br><br><br><br></p>
8	<p>次のボックスです<br><br><br><br><br><br><br></p>
9	<p>次のボックスです<br><br><br><br><br><br><br></p>
10	<p>次のボックスです<br><br><br><br><br><br><br></p>
11	<p>次のボックスです<br><br><br><br><br><br><br></p>
12	<p>次のボックスです<br><br><br><br><br><br><br></p>
13	<p>次のボックスです2<br><br><br><br><br><br><br></p>
14	<p>次のボックスです2<br><br><br><br><br><br><br></p>
15	<p>次のボックスです2<br><br><br><br><br><br><br></p>
16	<p>次のボックスです2<br><br><br><br><br><br><br></p>
17	<p>次のボックスです2<br><br><br><br><br><br><br></p>
18	<p>次のボックスです2<br><br><br><br><br><br><br></p>
19	<p>次のボックスです3<br><br><br><br><br><br><br></p>
20	<p>次のボックスです3<br><br><br><br><br><br><br></p>
21	<p>次のボックスです3<br><br><br><br><br><br><br></p>
22	<p>次のボックスです3<br><br><br><br><br><br><br></p>
23</div>
24<div class="gotop"><a href="#top">topへ</a></div>
25</body>

css
1* {
2	margin: 0;
3	padding: 0;
4}
5
6#visual {
7  width: 100%;
8  /*高さ設定はjsに記述*/
9  min-height:900px;
10  margin: 0 0 30px 0;
11  background-color: #FA8072;
12}
13
14.nextbox{
15	background-color: #ccc;
16	padding: 65px 0;
17	width: 100%;
18}
19
20.gotop{
21	position:fixed;
22	right:50px;
23	bottom:60px;
24	width:60px;
25	height:60px;
26	overflow: hidden;
27	border-radius: 30px;
28	background:#555;
29	transition: 0.4s;
30	z-index: 100;
31}
32.gotop:hover{ 
33	background:#510013;
34}
35
36a{
37	display:block;
38	margin:0 auto;
39	padding-top:0.09em;
40	padding-left:0.34em;
41	font-size:24px !important;
42}
43
44@media screen and (max-width: 640px) {
45#visual {
46  min-height:800px;
47}
48
49
50}
51

js
1//visualエリアの高さ取得と代入（リキッド対応のため）
2$(function(){
3	$(window).on('load scroll resize', function() {
4		var winH = $(window).height();
5		$('#visual').css('height',winH + 'px');
6		 //min-height:900pxの指定はcssで設定している
7	})
8});
9
10
11//ワンスクロール設定
12$(function(){
13	var startPos = 0;
14	$(window).on('scroll', function() {
15		var topWindow = $(window).scrollTop();
16
17		//console.log(topWindow);
18		if((topWindow > startPos) && (topWindow < 500)){
19			goLink('#nextbox');
20			//console.log('true');
21		}
22		if( topWindow === 0){
23			startPos = 0;
24		}else{
25			startPos = topWindow + 500;			
26		}
27		//console.log(startPos);
28	})
29});
30
31//スムーススクロールfunction設定
32function goLink(href) {
33	"use strict";
34	var target = $(href);
35	var position = target.offset().top;
36	$('body,html').animate({
37		scrollTop: position
38	}, 600);
39}
40
41
42//pageTop アニメーション
43$(function(){
44	var pagetop = $('.gotop');
45	pagetop.click(function() {
46		$("html,body").animate({ scrollTop: 0 }, 500);
47		return false;
48	});
49});

###発生している問題・エラーメッセージ

iPhoneのときに発生をするのですが。
右下の「topへ戻るボタン」を押したときに、ページのトップにスクロールして戻ります。
そのトップに戻ったときに、ワンスクロールが発動してしまうということが発生してしまっております。（何故かiPhoneだけ）

jqueryに詳しい方でコチラを解決できる方いらっしゃいますでしょうか。
また、私が書いたjqueryも自信がございません、私のコードをまるっと捨ててもっと効率の良いコードに出来るのでしたらそちらを示していただくパターンも大歓迎です。
ご教示お願い致します。

###アドバイスいただいたソースを実行

デモ3を作成しました、デモ3

skuromaku様のご意見を参考にしたデモを作成してみました。
理論上ではこれで解決できそうだと思ったのですが、上手く行きませんでした。
【問題点】
何回かに一回かはやはり、トップに戻った際にワンスクロールのjsが作動してしまいます。

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

回答1件

ベストアンサー

var _isTop = false; ★


$(function(){
    var pagetop = $('.gotop');
    pagetop.click(function() {
    
        _isTop = true;★

        $("html,body").animate({ scrollTop: 0 }, 500);
        return false;
    });
});

$(function(){
    var startPos = 0;
    $(window).on('scroll', function() {

　　　   // ★
        if(_isTop)
        {
          _isTop = false;
          return;
        }
        // ★

        var topWindow = $(window).scrollTop();

        //console.log(topWindow);
        if((topWindow > startPos) && (topWindow < 500)){
            goLink('#nextbox');
            //console.log('true');
        }
        if( topWindow === 0){
            startPos = 0;
        }else{
            startPos = topWindow + 500;            
        }
        //console.log(startPos);
    })
});

なぜ起こるのかはともかくとして、フラグを使って実行しないようにしてしまえばどうでしょうか？

■追記
iOSの場合、スクロールが終わってからscrollイベントが発生するようです。
結果として、トップに辿り着いてからイベントが発生するので次のエリアにスクロールされてしまいます。
https://qiita.com/m_ohsumi/items/b1d731809f5cc32dea7f

投稿2017/10/10 01:47

編集2017/10/10 01:50

退会済みユーザー

総合スコア0

holic

2017/10/10 03:35

原因となっていることがよくわかりました。「skuromaku」様ありがとうございます。しかし、解決できておりません。デモ3を作成しました。ご確認お願いします。 ※質問欄のところに追記しております、デモ3はそちらから御覧ください。

退会済みユーザー

2017/10/10 03:53

先ほどの修正を元に戻し $(window).on('scroll', function() { を $(window).on('touchmove', function() { に変えてみてはどうでしょうか？

holic

2017/10/10 04:50

”'touchmove”はスマホ用の記述ですね、勉強になります。只今作成してみました。スマホで見た場合はコチラで問題なさそうです。ただ、640pxがブレークポイントで640以上はPC画面を（つまりイベントは”scroll”）にして、640以下のスマホ版は（つまりイベントは”touchmove”）と分けるようにしたいです。どのようなjqueryにすればよいでしょうか。

退会済みユーザー

2017/10/10 06:16

PCの場合も「touchmove」で動作しないでしょうか？ちなみに、判定は下記に通りです。 https://qiita.com/torugatoru/items/2dc895d5db7fc839a8bc

holic

2017/10/10 10:01

skuromaku様　なんとか出来ました。お付き合いありがとうございます。また困ったときはどうぞよろしくお願いします。

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