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

smoothed scroll

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

【サンプル】
http://cocohp.com/sample/scroll/001/

See the Pen
smoothed scroll
by nakatax (@cocohp)
on CodePen.


【手順】
1.jQueryのCDNを読み込みます。※jQueryの基本

2.今回は、font-awesomeを採用しますので、下記のCDNを追記します。

これで、jQueryとfont-awesomeが利用できる基本準備が整いました。


3.scroll.jsを作成し、外部読み込みにします。

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