jQueryとCSS3で作るページの上までスクロールするボタン

wordpressはプラグインがたくさんあって便利です。しかし、個人的には安易にプラグインを使うのではなく、自作できるものは自作できるよう心がけています。 今回紹介するのは前からよく使われている方法ですが、プラグインで実装している人も多いようなので紹介します。自分で作った方が自由ですし、無駄に大きなファイルにならないのでいいかと思います。 今回はボタンが現れるパターンを3種類作ってみました。定番のフェードインして現れるものと、CSS3を使ったものがあります。まずはサンプルをご覧ください。 HTMLは全て同じです。 <a href="#" id="page-top1">上に戻る</a> 非常にシンプルです。 では、CSSとiQueryを1つずつ解説します。 1. フェードイン まずはとても有名なやつです。ある程度スクロールするとフェードインして現れます。CSSは次のようになります。サンプルは

[tact_tomi]

スクロールボタン

[laconic]

ページのトップに戻る / フェードで浮かび上がる、下から現れる

[gonnu]

ページのトップへ戻るボタンにエフェクト

[z1a2nh]

よろしく哀愁

[poppun1940]

via はてなブックマーク - 人気エントリー - テクノロジー http://ift.tt/JGfH6b

[maritimecolor]

プラグインなしで作れるの助かります！感謝！

[masapon49]

φ(｀д´)ﾒﾓﾒﾓ...