jQuery

ホームページに必須!?jQueryでトップへ戻るボタンの作り方


みなさんこんにちは、mayukouです。
だいぶ春らしくなってきましたね。
桜のシーズンももうすぐです。

さて今回は、よく見かけるホームページのトップへ戻るボタンの作り方をご紹介します。
動きとしては、下にスクロールすると浮かび上がってくるというものです。

では、解説いたします!

スポンサードリンク

デモ

まずはデモをご覧ください。

DEMO

 

設置方法

html

画像ファイル arrow.png

css

js

head内に
jQuery本体(ここでは、jquery-1.7.1.min.js)


下記を読み込みましょう。下記は、別ファイルにして読み込んでもいいし、

head内に囲んで読み込んでもOKです。

最後に

いかがでしたか?

長いコンテンツには欠かせないトップへ戻るボタンの設置方法をご紹介しました。
ぜひお試しください。

参考:http://www.webopixel.net/javascript/538.html

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. CSSフレームワーク

    簡単にBootstrapで!100%表示のレスポンシブ対応のカルーセルスライダー

    こんにちは、mayukouです。お盆も過ぎて、後半戦が始まった感じで…

  2. illustration

    簡単!Illustratorでキラキラ星を作る方法

    みなさんこんにちは。mayukouです。だいぶ秋らしくなってきまし…

  3. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpressで作るメリットとデ…

    みなさんこんにちは、mayukouです。約3年ぶりにポートフォリオサ…

  4. Web Design

    webデザインのトレンドと取り入れよう!デザインの参考になるwebリソース 〜海外編〜

    みなさんこんにちは、mayukouです。あっという間に土曜の半日が…

  5. Web Design

    今流行りのロングシャドウの簡単な作り方

    フラットデザインとともに、相性が良いとしてデザインに取り入れられている…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. 写真

    現像で素人感からプロっぽく!Macの写真アプリが素敵
  2. ブログ

    [書評]サラリーマンだけが知らない好きなことだけ食っていくための29の方法
  3. グッズ

    軽くて良いかも!DELFONICSの2015年の手帳買いました!
  4. マーケティング

    コンテンツマーケティングにおける有益な記事とは?ブログ運営3年目の私の最適解
  5. Web Design

    スキルアップ!Webデザイナーになるための勉強をしたい人にオススメ書籍まとめ
PAGE TOP