HTML応用

HTML5

CSS3

jQuery

PHP

デザインのコツ

SEO対策

ページ内リンクを実装

aタグなどでリンク先に「#○○」とつけると、そのページ内の「id="○○"」とつく要素の位置へスクロールした状態でアクセスできます。

しかし、この方法だと同じページ内なのにアクセスし直すことになりユーザーにとって不便です。

jQueryを使えば、そのようなページ内リンクをスムーズに行うことができます。

ファイルの準備

今回は、宣言文のみ入力したhtmlファイルと、jQuery本体とロールオーバー用のjsファイル、cssファイルを用意しました。

ファイルセット「scroll.zip」をダウンロード

上のボタンからダウンロードし、解凍後、以下の階層構造になっていることを確認してください。

    hover

  • index.html
  • style.css

      • js

    • jquery.js
    • scroll.js

今回用意したhover.jsでは、aタグにセットされたリンク先が「#○○」となっていれば、該当のidがつく要素の位置へスクロールするというもの。

つまり、このjsファイルさえ読み込んでおけば、ページ内リンクを押したときに自動でスクロールの動作をします。

head内でjQuery本体とscroll.jsを読み込む

index.html
<head>
  <!-- ～省略～ -->
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/scroll.js"></script>
</head>

では実際にid名をつけた要素と、その要素へのリンクを挿入して動作するかを確認しましょう。

index.html
<body>
  <div id="top"></div>
  <a href="#top">トップへ戻る</a>
</body>
style.cssl
#top{
    height:1500px;
    background-color:rgb(20%,20%,20%);
    background:linear-gradient
    (to bottom, rgb(60%,60%,60%), rgb(30%,30%,30%) );
}

#topのスタイルには高さを大きく設定してスクロールバーが出るようにします。色は分かりやすいようにグラデーションを使用しました。

一番下までスクロールして「トップへ戻る」を押してみましょう。スルスルっと上までスクロールすれば正しく動作しています。

見本ページを新しいタブで開く
PAGE TOP