jquery FullPageScoll(学習65日目TIL)

210914プラグインを使用しないでページ全体のスクロール効果を実現するのは初めてです.今日は調子が悪かったのかhtmlにjavascriptを植え込む時にスペルを1つ漏らしたので1時間以上うろうろしていました...jsがまったく動作しないが、コンソールウィンドウにエラーがない場合は、この点を考慮してください.

Must Remember

ピグマは、CSS上の各要素の位置を決定することができる.

のコンテンツを含むdivの高さをウィンドウの高さとして指定します.

var ht = $(window).height();	
  $("#container > div").height(ht);

  $(window).resize(function(){
    $("#container > div").height(ht);
});

asideでは、ウィンドウの高さの半分から自分の高さの半分を減算し、スクロール位置を常に右側の真ん中に置くように増やします.

var t = $(window).height()/2 - $("#quick").height()/2;
 $("#quick").stop().animate({"top":t}, 500, "linear");

$(window).scroll(function() {
 var quickPos = $(this).scrollTop() + t;
 $("#quick").stop().animate({"top":quickPos}, 700, "linear");
});