jQueryプラグイン「ScrollTo」でページ内リンクをスムーズスクロール

HTMLのみでページ内リンクを作成する場合、通常、以下のようにコーディングしますね。

<a name="top" id="top"></a>

<a href="#top">ページTOPへ</a>

「ページTOPへ」をクリックすると、nameとidに「top」を設定している箇所にスクロールします。nameとidの2つを設定しているのはクロスブラウザ対策です。

この時、スクロールといっても、ブラウザの縦スクロールバーが表示されている場合に、そこに瞬時にジャンプするだけです。

特にページが縦に長い場合に、瞬時に移動してしまうと、画面が急に差し変わるので、他のページに遷移したと錯覚を起こす場合もあるようです。また、ただ単純に見栄えが良いということで、最近ではJavaScriptを利用してスムーズなスクロールを実装するサイトを多く見かけます。

そこで今回はjQueryを利用した実装のサンプルです。

プラグイン「ScrollTo」を使います。

ScrollTo

私の場合だと、jquery1.3系で各種ブラウザで動作確認できました。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.scrollTo.js"></script>

<div id="top">
...
</div>

<img src="sample.jpg" id="btn" />

$('#btn').click(function(){
$.scrollTo($("#top"));
});

idが「btn」の要素をクリックすると、idが「top」の要素にスムーズにスクロールするサンプルです。jQueryベースなので、要素の指定の仕方は、通常のページ内リンクに比べて、サイト構成に応じた自由度が高いといえます。