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. Web Design

    自分の頭をデザイン脳に!CSS nite fukuoka vol.8に参加しました

    みなさんこんにちは、mayukouです。このあいだ1月に行われたセミ…

  2. Web Design

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

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

  3. Web Design

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

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

  4. Web Design

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

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

  5. jQuery

    スマホに使える!3階層のアコーディオンメニューを作りました!

    仕事でスマホサイトを作っているのですが、その際にモックアップとして作…

  6. Web Design

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

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

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Illustrator

    助かった!Illustratorが重たい時の対処方法
  2. Web Design

    今後のデザインのトレンドとして注目!コンテンツファーストのサイトをまとめてみた
  3. jQuery

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

    iPad Proを液タブに♫Astropad Studioはイラストレーターには…
  5. Photoshop

    Photoshopのウィンドウを見やすく!ワークスペースを工夫してみよう
PAGE TOP