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

    面倒じゃない!簡単なIllustratorでシームレスなパターンの作り方

    みなさんこんにちは、mayukouです。デザインを作る上で、背景がシ…

  2. Web Design

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

    みなさんこんにちは、mayukouです。webの業界は、日々進歩して…

  3. Web Design

    デザインが成功するテンプレがここに。「なるほどデザイン」を読みました

    みなさんこんにちは、mayukouです。今回は、デザイン関連のお勧め…

  4. Photoshop

    画像からフォントを探してくれる!Photoshopのマッチフォントが素敵。

    みなさんこんにちは、mayukouです。「このフォント何を使っている…

  5. Web Design

    作るごとに成長しよう!キュレーションメディアを作るときに気をつけること。

    みなさんこんにちは、mayukouです。仕事でキュレーション風ニュー…

  6. Web Design

    カフェのサイトをwordpressでリニューアル制作しました。その時の覚書

    みなさんこんにちは、mayukouです。さて、今回はwordpres…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. 日記

    wordpressでコーギーブログ始めました♫
  2. Web Design

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

    現像で素人感からプロっぽく!Macの写真アプリが素敵
  4. クリスマス

    メリークリスマス☆ハイアットのケーキや、ケンタッキーのチキンなど家で過ごしたクリ…
  5. Mac

    自炊するときに、便利!MacアプリCaffeine
PAGE TOP