とっても簡単!スクロールするとスーっと出現するトップへ戻るボタンを設置する手順 | うぇぶ小屋

とっても簡単!スクロールするとスーっと出現するトップへ戻るボタンを設置する手順

とっても簡単!スクロールするとスーっと出現するトップへ戻るボタンを設置する手順

ページを下にスクロールするとスーっと出てくるトップへ戻るボタンの設置方法です。

導入方法はとっても簡単。

まずはじめに「トップへ戻る」ボタン画像を用意します。

ボタン画像はお好みで良いのですが、ICON FINDERで探すと良いものが見つかるかもです。

サイト作成に必要なアイコンはほぼ揃いますが、今回は「トップへ戻る」の矢印ボタンが欲しいので「arrow」で検索すると良い感じのものが見つかるかと思います。

ボタン画像が決まれば、保存した後、その画像をアップロードしておきます。

次にjQueryのライブラリファイルを用意します。

jQuery公式サイトに「PRODUCTION (32KB, Minified and Gzipped)」というタイプのJavaScriptfファイルがあるので、ダウンロードします。

iQuery

Download

ファイルが開いたら右クリックで保存↓

iQuery2

ファイルがダウンロードされました。

iQuery3

確認出来たら、アップロードします。

アップロードしたら、下記コードのパス部分を自分のものに書き換えて
HTMLの<head>~</head>内にそのコードを挿入します。

次は下記のページでスクリプトscrolltopcontrol.jsをダウンロードします。 

サイトの真ん中辺りにあります。

scrolltopcontroljs1

Download

ファイルが開いたら右クリックで保存 ↓

scrolltopcontroljs2

ファイルがダウンロードされました。

scrolltopcontroljs3

ダウンロードしたscrolltopcontrol.jsをエディタで開き、12行目の画像ファイルのURL部分をはじめに用意した自分のものに書き換えて、画像のサイズも実際のものに合わせます。

scrolltopcontroljs5

書き換えが終わったらそれを保存してアップロードします。

アップロードしたら、先ほど同様下記コードのパス部分をアップロード先のURLに書き換えてHTMLの<head>~</head>内にそのコードを挿入します。
以上で導入完了となります。

当ブログでも導入してみましたが、ちょっと気が利いた感じで良いのではないでしょうか。

参考にした記事:
jQueryで、ぬるっとスクロールしながらページのトップに戻る機能を実装する。
関連記事

スポンサード リンク

TwitterやFacebookページでは日々うぇぶ小屋が気になった情報(ウェブ制作・運営、ブログの収益化に関する事が多い)をつぶやいていますのでこの機会にぜひ"フォロー"または"いいね"をよろしくお願いします。


Twitterアカウント → @webgoya
Facebookページ → webgoya
RSSフィードを配信しています → RSS購読はこちら

コメント一覧

できました!!! かしま

見よう見まねでやってみたら、できました。
有難うございました。(^o^)

2013/04/07 Sun 01:01 | URL

この記事にコメントを残す
管理者にだけ表示を許可する

人気記事

最新のエントリー

カテゴリ

ライター募集!