jqueryについて教えて下さい。

質問

貴重な場をお借りして質問させていただきます。
知識のある方、お力を貸して下さい。

今勉強の為プラグインなどを制作しておりまして、
一定の値までスクロールするとコンテンツをフェイドインさせるような
スクリプトを書いています。
ただ、別ページに遷移して戻ってくると、opacityが0となり真っ白な状態と
なってしまいます。
それを解決するためにcookieなどを使ったりはして出来たのですが、
スマートではないので、cookieを使用せずに出来れば嬉しいのですが、
良い方法ございましたら、ご教示いただけないでしょうか。
宜しくお願い致します。

<script type="text/javascript">
$(function(){
$('#contents1').locationFade();
$('#contents2').locationFade();
$('#contents3').locationFade();
$('#contents4').locationFade();
})
</script>

(function($) {

$.fn.locationFade = function(options){

var defaults = {
fadeSpeed:500,
location:300,
easing:'swing'
}
var opts = $.extend(defaults , options);
var windowHeight = $(window).height();
var target = $(this);
target.css('opacity',0);//最初に透明度0とする

$(window).on('load' , function(){
//画像が読み込まれた後でないとtargetOffsetがきちんと取れない為

target.each(function(){
var targetOffset = target.offset().top;
if(windowHeight > targetOffset){
　　　　　　//最初から要素がwindowサイズ内に表示されているなら即fadeIn
target.stop().fadeTo(opts.fadeSpeed , 1 , opts.easing)
}

$(window).on("scroll", function(){
var scrollTop = $(window).scrollTop();
var scrollVol = scrollTop + windowHeight - opts.location;
//locationはその要素のどれだけ上に来た時に表示するかの値

if(targetOffset <= scrollVol){
target.stop().fadeTo(opts.fadeSpeed , 1 , opts.easing)
};
});

});
});
};

})(jQuery);

回答No.1

noname#202910 · ベストアンサー

戻るボタンを押した時、onloadが走らないということでしょうかね？

・最初にopacity(「不」透明度)=0
・onload時に画面内の要素はフェードイン
・onscrollで画面内に入ったものを順次フェードイン

ではなくて

・最初はopacity=1
・ onload時に画面外(下側)のものをopacity=0にする
・onscrollで、画面外(下側)のものはopacity=0にする。
画面内のものはフェードインする

のようにしたら、onloadが走らなくてもそれなりの動きになるんじゃないでしょうか。
試してないので違ってたらご容赦を。

お礼

そのような考えが浮かびませんでした！本当に助かりました！！お礼が遅くなり申し訳ございません。今後ともよろしくお願いいたします！