ページトップリンク

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

ページトップリンク

おさえておきたいところ

「ページトップリンク」を使う目的はこんな感じです。

             目的：ページの先頭へ迅速に戻る
動きのきっかけ：クリック / スクロール

ページの先頭にスムーススクロール

ページの指定の高さを超えたら出現（下から上）

ページの指定の高さを超えたら出現（右から左）

ページの指定の範囲内で出現（下から上)

ページの指定の範囲内で出現（右から左）

ページの指定の高さを超えたら出現しFooter手前で止まる

スクロール途中からリンクボタンの形状が変化

リンクボタンをクリックしたら形状が変化

スクロールの速さを変化させる（jquery.easing）

次回の予定

ページ内の目的の場所にスクロールさせる
「ページ内リンク」を作ってみようと思います＼＼\\٩( ‘ω’ )و //／／