ページトップリンク
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
ページトップリンク
おさえておきたいところ
「ページトップリンク」を使う目的はこんな感じです。
目的：ページの先頭へ迅速に戻る
動きのきっかけ：クリック / スクロール
ページの先頭にスムーススクロール
See the Pen ページの先頭にスムーススクロール by Web Navigator (@web-navigator) on CodePen.
ページの指定の高さを超えたら出現（下から上）
See the Pen ページの指定の高さを超えたら出現（下から上） by Web Navigator (@web-navigator) on CodePen.
ページの指定の高さを超えたら出現（右から左）
See the Pen ページの指定の高さを超えたら出現（右から左） by Web Navigator (@web-navigator) on CodePen.
ページの指定の範囲内で出現（下から上)
See the Pen ページの指定の範囲内で出現（下から上) by Web Navigator (@web-navigator) on CodePen.
ページの指定の範囲内で出現（右から左）
See the Pen ページの指定の範囲内で出現（右から左） by Web Navigator (@web-navigator) on CodePen.
ページの指定の高さを超えたら出現しFooter手前で止まる
See the Pen ページの指定の高さを超えたら出現しFooter手前で止まる by Web Navigator (@web-navigator) on CodePen.
スクロール途中からリンクボタンの形状が変化
See the Pen スクロール途中からリンクボタンの形状が変化 by Web Navigator (@web-navigator) on CodePen.
リンクボタンをクリックしたら形状が変化
See the Pen リンクボタンをクリックしたら形状が変化 by Web Navigator (@web-navigator) on CodePen.
スクロールの速さを変化させる（jquery.easing）
See the Pen スクロールの速さを変化させる（jquery.easing） by Web Navigator (@web-navigator) on CodePen.
次回の予定
ページ内の目的の場所にスクロールさせる 「ページ内リンク」を作ってみようと思います＼＼\\٩( ‘ω’ )و //／／
