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

    横幅いっぱいに表示可能なスライダーのjQueryプラグイン 「Skippr」が便利!

    みなさんこんにちは。11月に入り寒くなりましたね。今年もあと2ヶ月と…

  2. jQuery

    簡単設置で見やすい!レスポンシブ対応メニューslicknavの使用方法

    みなさんこんにちは、mayukouです。さて、4月21日から、goo…

  3. CSSフレームワーク

    サイト制作が早くなる!Bootstrapの特徴

    サイト制作のスピードを上げたい、そんな方に。6、7年くらい前にこのB…

  4. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介

    みなさんこんにちは、mayukou です。肌寒いような暖かくなった…

  5. CSS

    レスポンシブ対応!CSSで二重線のボーダーボックスを作る方法

    みなさんこんにちは、mayukouです。先日、ホームページを作る際に…

  6. jQuery

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

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

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. デザイン

    デザインの引き出しを増やすために!スクラップがオススメ♪
  2. デザイン

    お店の顔!仕事の幅も広がる私流ロゴデザインマニュアル
  3. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpres…
  4. CSSフレームワーク

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

    今や欠かせない存在!iPad Pro “9.7を購入して、約3ヶ月が…
PAGE TOP