2012年11月21日 category : WordPress tags :

【jQuery × WordPress】TOPに戻るボタンをニュッと表示させてみた

このエントリーをはてなブックマークに追加

スクロールを進めていくと、ニュッ、ニョっと現れるTOPに戻るボタンを設置してみました。

スクロールを進めていくとニョっと現れる「TOPに戻る」ボタンを追加してみました。ちょっと前まではTOPに戻るリンクが下部にありクリックするとTOPへ移動するパターン、次に現れたのがスムーズにスルスルとTOPまで移動するパターン。

そして最近見かけるパターンが途中までスクロールするとフェードインでモアっと出現したり、下や横からニョっと現れクリックするとスムーズにスルスルと戻るタイプのものです。jQueryで動いています。

01 . 参考にさせてもらったブログ

ワードプレス(WP)でフェード&スムーススクロールのページ先頭に戻るボタン | ぷらすぶろぐ
古くから「ページの先頭に戻るリンク」の需要はありましたが、近年設計されたサイトを見ていると、 最初は非表示でスクロールしたら現れる フェードインで現れフェードアウトで消える トップまでスムーススクロ …

【カスタマイズ】トップに戻るボタンをjQueryでニュルッと改造する : りくまろぐ
魚のヌルッとした手触りが苦手で釣りに行きません。りく(@Rikuma_)です。 今回は「トップに戻る」ボタン改造のオハナシ。 ブログやサイトなどで、ページの右下だったり左下だったりに「トップに戻る …

ニュッとTOPに戻るボタンを設置するにあたり参考にさせてもらったブログです。わかりやすく丁寧に紹介してくれていますのですんなり設置できました:)

02 . 手順メモ

1.画像をimages/にアップロードする
2.HTML:aタグを追加する
3.CSS:position: fixed; で固定、表示位置を指定する
4.javascript:処理を外部ファイルか埋め込みで書く(場所どこでもOK)

03 . ちょっと改造してみた

TOPに戻るボタンを追加したついでに前の記事、次の記事へ移動するボタンも一緒に設置してみました。ちょっと個性でたでしょうかね。jQueryおもろ。


HOME >>  WordPress > 【jQuery × WordPress】TOPに戻るボタンをニュッと表示させてみた