パイルリンクは中小企業のシステム化を
支援するITコンサルティング会社です
PILELINK
03-5809-2298
受付時間 平日10:00~18:00

ホームページに
jQueryを導入する方法

当ページの概要

既存のホームページに「jQuery」を導入することは多少の手間では有りますが、
決して難しいものではありません。

このページでは、既存のホームページに「jQuery」を新規導入して
ちょっとした動きを追加するところまで解説しています。

HTML・CSS・JavaScriptの基本的な知識をお持ちの方を主な対象としていますが、
ホームページ制作に興味のある初心者の方にも
ある程度ご理解頂けるように分かりやすい表現を使用していきます。

基本となるHTMLを以下のように設定します

どのホームページにも応用が利くように
以下のようなHTMLにjQueryを組み込むというシナリオにします。
<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>既存のWebページ</title>
</head>
<body>
ページの1番上
<div style="width:100%;height:300px;background-color:#ff97c2;"></div>
<div style="width:100%;height:300px;background-color:#ff9872;"></div>
<div style="width:100%;height:300px;background-color:#e4ff8d;"></div>
<div style="width:100%;height:300px;background-color:#93ffab;"></div>
<div style="width:100%;height:300px;background-color:#8ef1ff;"></div>
<div style="width:100%;height:300px;background-color:#8eb8ff;"></div>
<div style="width:100%;height:300px;background-color:#c299ff;"></div>
<a href="#">ページの1番上に移動する</a>
</body>
</html>
ページの1番下から1番上へ移動するリンクがあり、背景が虹色となっています。
単純化する為に、CSSファイルやJSファイルはありません。

ちなみにこのような表示になります。

「ページの1番上に移動する」というリンクをクリックすると
一瞬でページの1番上に表示が切り替わると思います。

早速、jQueryを導入してみましょう

以下のソースを、先程のHTMLに貼り付けます。
場所は大体どこでもいいのですが、
scriptタグだけですので<head>~<head>の中に書くのが一般的です。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('a[href^=#]').click(function(){
        var speed = 400;  // スクロールする時間(ミリ秒)
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
});</script>
実は、これで完了です。何をしたのか、簡単に解説します。

1行目のscriptタグでjQueryを読み込んでいます。
この読み込みを行うことで、自分が記述しなければならないプログラムの量が大幅に削減できます。

他にもjQueryを読み込む方法はありますが、
別の機会にご紹介しようと思います。

2~12行目のscriptタグで自分の実現したいことを記述しています。
概要は「ページ内移動のリンクはスムーズにスクロールしてね」というものです。

中身を理解しようとすると少し難しいのですが、
書き方が決まっているのでコピー&ペーストをするだけです。

そして、スクロールにかける時間を変更したければ、数字だけ書き換えて完成です。

変更後はこのようなページになります。

「ページの1番上に移動する」というリンクをクリックすると
0.4秒かけてページの1番上までスムーズにスクロールしていると思います。

このスムーズスクロールが全世界で1番使われている機能のような気がします。
みんなが使っている(使いたい)機能は、大体用意されていますので、
決まったソースをコピー&ペーストで貼り付けるだけで
どのようなWebページでもすぐに対応完了です。

全世界で爆発的に普及している理由が少しはお分かり頂けたのではないでしょうか。
point
ここがポイント!
  • ホームページ上でよく見かける機能の多くはコピー&ペーストで対応完了!
合同会社パイルリンク Facebook公式ページ
Copyright 2010 PILELINK LLC.
All Rights Reserved.