JavaScriptの挙動について（無限スクロールページ）

Question

他サイトを参考に（JavaScript、php等をコピーして使用）してwebサイトを作成しましたが、
思うようにJavaScriptが動いてくれません。

作成したページは↓です。

無限スクロールを実装したページを目指しました。

以下、問題点です。

□最初の表示について
ページアクセス後の表示は

<div class="section-01">
		<img class="diver" src="img/asyl.gif" srcset="img/asyl.gif 1x, img/[e-mail] 2x" >
  </div>

の部分が表示するようにしたいのですが、現状は<div class="section-04">あたりが表示されてしまいます。

□スクロールについて
下スクロール時は自動で、<div class="section-01">〜<div class="section-13">までスムーズに動くのですが、
上スクロール時には<div class="section-01">までいくと、表示位置が<div class="section-04">まで戻ってしまいます。

JavaScriptにお詳しい方、御教授いただけますと幸いです。
よろしくお願い致します。

Answer 1

	//Pause
	setTimeout(function(){

		//Fade in
		$('#container').fadeIn(0);

		//Set first repeat_up
		setTimeout(function(){
//..
			$("html, body").animate({'scrollTop': $(window).height() * 2}, 1);

というコードが書かれていますから、ページトップからウィンドウ高さ2画面分（$(window).height()*2）下にスクロールするのはコードのとおりかと思います。
解決方法としては、この行を削除するといいかと思います。

Comments

[HisaoAndo]

ご回答いただきまして誠にありがとうございます。

ご指摘の通り、１行削除しましたところ最初の表示位置はよいのですが、最初の状態から上スクロールが効かない状態になりました。

Javascript初心者なりにいろいろ試してみましたがどうもうまくいきませんでした…。

恐れ入りますが、再度ご指摘いただけますと幸いです。
よろしくお願いいたします。

[Lhankor_Mhy]

試していませんが、$(document).scrollTop(1); などで、1px ぐらい下げておくというのはどうですか？

[HisaoAndo]

ご回答ありがとうございます。
試してみました。

上スクロール時の不具合がうまく解消できていない状況にあります。。。

アドバイスいただけますと幸いです。
よろしくお願い致します！

[Lhankor_Mhy]

そちらも同様に、
$("html, body").animate({'scrollTop': $(window).height() * 2}, 1);
のコードがよくないと思いますよ。

[HisaoAndo]

ご回答ありがとうございます。

いろいろ試してみて、少し理想の形に近づきました。

またアドバイスいただけますと幸いです。
よろしくお願い致します。

Answer 2

参考にされているサイトのコードを見ましたが、バグがありますし、そもそも無限スクロールとして機能していませんね。設計がおかしいので、参考にするのには不適切だと思います。

下記のサイトのほうが正しくて明快な方法を説明していますので、こちらを参考にされることをお勧めします。

どのやり方がいい？ ブクマしておくと便利なjQuery無限スクロールまとめ

ご参考になれば。

Comments

[HisaoAndo]

ご返信いただきましてありがとうございます。

http://asyltokyo.com/main/
↑が私が作成したぺーじになります。

参考に下のは↓になります。
http://www.softwarelabel.net/

わかりにくい説明で失礼しました。

また、参考のサイトをありがとうございます。

引き続き、ご指摘いただけますと幸いです。
よろしくお願い致します。