管理メニュー

tianlang @ ウィキ

ページの天井へスクロール

最終更新：

tianlang

- view
管理者のみ編集可


▼



jQueryでスムーススクロール
最近、Webサイトを制作していて必ず要望に入れられるのが「スムーススクロール」です。
あまりJavaScriptに詳しくないので、ライブラリのプラグインばかり使用していたのですが、
jQueryのみでも、スムーススクロールができることを知りました。

jQueryを最近ようやく勉強しはじめて、知ってる人には知っているという内容なので恐縮なのですが、私はあまりというかほとんどと言っていいほど JavaScriptを知りません。たまに作りたいスクリプトがあったら自作とかしますが、全くといっていいほど基礎を知りません。

そういう非プログラマーの強い見方が「jQuery」といったJavaScriptのライブラリです。これにより、かなりJavaScriptの記述が簡単になり、Webデザイナーなど普段プログラムを組まないような人でも、Webサイトによく組み込まれる「ロールオーバー」や「ドロップダウンメニュー」なども簡単に設置できるようになります。

いろいろ便利な使い方が出来るのですが、今回は「スムーススクロール」について述べますね。
JavaScriptのライブラリ

JavaScriptのライブラリには以下のようなものがありますが、私はjQueryしか使ったことないです。 

   * Prototype
   * jQuery
   * MooTools

jQueryのダウンロード

まずは、jQueryをダウンロードします。単純に呼び出すために使うので、ソースコードや改行が省略化されたPRODUCTIONバージョンを選びましょう。

jQuery: The Write Less, Do More, JavaScript Library
HTMLの記述

HTMLを以下みたいな感じで記述して、jQueryを呼び出します。

HTMLコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <title>テスト</title>
  <link rel="stylesheet" type="text/css" media="all" href="common.css" />
  <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
  <script src="function.js" type="text/javascript"></script>
</head>
<body>
<div id="header">・・・</div>
<div id="contents"> 
  <p>テキストテキストテキスト</p>
  <p>テキストテキストテキスト</p>
  <p>テキストテキストテキスト</p>
  <p><a id="sample">サンプル</a></p>
  <p>テキストテキストテキスト</p>
  <p>テキストテキストテキスト</p>
  <p><a  href="#sample">サンプルへ移動する</a></p>
  <div id="#totop"><a href="#">ページのトップへ戻る</a></div>
</div>
<div id="footer">・・・</div>
</body>
</html>

スムーススクロール用JavaScript

新規にfunction.jsというJavaScriptファイルを作り、以下のように記述します。ファイル名は何でもよいのですが、WordPress でもそうですし、どうやら関数はfunction.jsといったファイルにまとめて書いたほうがメンテナンスがよい気がします。

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;
     // スムーススクロール
     $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing');
     return false;
  });
});

コメントを書いているのでだいたいわかると思いますが、内部リンクは全て#から始まりますので、まず、「$('a[href^=#]').click(function() 」で最初が#から始まるアンカーをクリックした場合のみ処理が起こるようにします。a[href^=#]というのはCSS3の書き方です。

アンカーの取得は「var href= $(this).attr("href");」という書き方をしていますが、「var href= this.hash;」でも取得できるようです。しかしこの場合、アンカーが#のみであった場合、値がないのですよね。なぜなのかはよくわからないので、 attrで取得するようにしています。

移動先は、#のみの場合htmlタグへ、それ以外はアンカーに記述されているidのところへ、というふうに条件を振っています。

animateでアニメーション効果をつけることができます。

引数は、値を変更したいプロパティ,スピード,動き,コールバック関数、になります。

scrollTop:positionで移動先のスクロールの位置を指定します。

speedでスクロールの速度を指定します。単位はミリ秒です。

動きは、linearとswingがあります。linearは直線的な一定の速度で、swingは最初はゆっくりで徐々に早くなります。

コールバック関数はここでは指定していないので割愛します。

($.browser.safari ? 'body' : 'html')という記述がありますが、ページの戻りを指定する場合、基本的にhtmlタグのところを指定すればよいのですが、なぜかSafariと Chromeはhtmlタグを指定するとスクロールが有効にならないので、bodyタグを範囲にしています。
このスムーススクロールのよい点

いろいろな書き方が出来るのですが、この場合だと、ページのトップへ戻るのも、内部リンクも特別なことをしなくても（クラスを指定したり、戻り値を個別に指定しなくても）スムーススクロールになるので便利です。

あと、このスムーススクロールのいいところは、リンク先のURLにアンカーで指定した文字が付加されないということです。つまり、「http://www.coolwebwindow.com#」というようにならず、「http://www.coolwebwindow.com」のままでスクロールしてくれます。これのいい理由は、検索ページがおかしくならないという点です。

どういうことかというと、つまり、検索ページのURLって大抵引数がついていますよね？それが内部リンクによってさらに引数がついてしまうと、別の検索結果になってしまい、ページの内容がおかしくなってしまいます。それが回避できるのです。
動作確認

WindowsXPのIE6、Firefox3.6.13、Opera10.63、Safari5.0.2、Chrome8.0です。（あれ、いつのまにChromeってバージョン8までいったの？）これらでは全て正常に動作しました。
もっとダイナミックな動きをさせたい場合はプラグインを

今回はjQueryのみで実装しましたが、スムースさ加減が二種類しかないので、スムーススクロール用のプラグインなど読み込めばもっといろいろな動きでスクロールすることができます。

プラグインについては以下などを参考にしてみてください。

ページ内スクロールのjQueryプラグインいろいろ - かちびと.net
参考にしたサイトなど。謝辞。

jQueryでページ内リンクをスムーズスクロールする ｜ TRIPLEXXX

jQueryで遊んでみる その7 · CamCam

jQueryでアンカーリンクをスムーズスクロールの練習 | 乱雑モックアップ
参考にした書籍

完全カラーですっごいわかりやすいです！初めてjQueryを学ぶなら絶対買いですよ！感謝！
「ページの天井へスクロール」をウィキ内検索
「WEBデザイン」関連ページ
人気記事ランキング
  1. 一覧トップ/WEBデザイン関連/デザイン参考用サイト
もっと見る
最近更新されたページ
もっと見る
ウィキ募集バナー