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

ホーム / JavaScript / とっても簡単!スクロールするとスーっと出現するトップへ戻るボタンを設置する手順
  • 2012/11/25
  • とっても簡単!スクロールするとスーっと出現するトップへ戻るボタンを設置する手順

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

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

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

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

    ボタン画像はお好みで良いのですが、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

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

    人気記事

    最新のエントリー

    カテゴリ

    ライター募集!