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. Photoshop

    ちょっと洒落てる!Photoshopで作る、白いシャドーが入った押したくなるボタンの簡単な作り方

    みなさんこんにちは、mayukouです。最近は暑すぎず、どちらかと…

  2. Web Design

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

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

  3. Web Design

    CSS nite in FUKUOKA vol.6に行ってきました。

    みなさんこんにちは。今日は福岡はあいにくの雨ですが、いかがお過ごし…

  4. jQuery

    ボックス要素を横並びにしたときに高さが揃えられるJQuery、jquery.matchheight.…

    みなさんこんにちは、mayukouです。今回はwebデザインするとき…

  5. Web Design

    WordPressブログを同じサーバーに複数作る方法

    これ、実は知らなかったのですが、とっても簡単でした。そんなことも知…

  6. Web Design

    丸からスライドして出てくる検索ボックスの作り方

    みなさまこんにちは、mayukouです。今日は天気がいいのでランニ…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

[mc4wp_form id=”2540″]

最近の記事

instagramもやっています

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.

facebook更新中!

スポンサー

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

  1. illy

    レポート

    うちカフェでホッと一息できる*illyのコーヒー粉が届きました!
  2. iPad Pro

    iPad Proを液タブに♫Astropad Studioはイラストレーターには…
  3. グッズ

    第二の脳になる?Kindle Paperwhite wifiを一週間使ってみての…
  4. ブログ

    色々宣言!?2016年の振り返りと来年の抱負
  5. Photoshop

    Photoshopでスタンプ表現が簡単に!PSD素材で一発表現!
PAGE TOP