jquery FullPageScoll(学習65日目TIL)

5904 ワード
2回目のクエリ 完全スクロール テキストリンク
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");
});
    githubへのローカルコードのアップロードを教えてあげます
    19日目(01-04-2021)