◎ Webデザイン後編/練習問題(上)

smoothed scroll

シングルページの基盤となるスムーズスクロールを学習します。
まずは、サンプルをご覧ください。
http://cocohp.com/sample/scroll/001/


【手順】
1.jQueryのCDNを読み込みます。下記のサイトを参考にします。
https://code.jquery.com/
https://developers.google.com/speed/libraries

2.今回は、font-awesomeを採用しています。

3.scroll.jsを作成し、外部読み込みにします。
今回は、2つのアクションを搭載しています。#で始まるすべての動作が、swingする動きを実装します。それに加え、.pagetopというクラスセレクタを用意し、CSSにて非表示にしておきます。(display:none)スクロールが100以上になった時点で、フェイドインアウトをする動作と連携させます。