ページ内リンクをスマートにするsmoothScroll.js

ページ内リンクをスムーズに行うjsライブラリ、smoothScroll.jsを作成したので公開します。

どういったものかはサンプルで確認してください。

<a href="#header">ページの先頭に戻る</a>

などのページ内リンクをスムーズな移動に変更します。
これにより、エンドユーザーがページが遷移したという錯覚におちいることはありません。

設置方法は簡単です。

smoothScroll.jsをダウンロードして、設置したいページで取りこみます。

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

特定のリンクはスムーズさせない

smoothScroll.jsは#（ハッシュ）付きのリンクを全てスムーズスクリプトに変換します。他のライブラリなどで#付きのリンクを利用していて、そこに関してはスムーズスクリプトに変換したくない場合は次のように記述してください。

<a href="#header" data-tor-smoothScroll="noSmooth">スムーズなし</a>

HTML5のカスタムデータ属性「data-tor-smoothScroll」に対して「noSmooth」を指定することでスムーズを抑制することができます。

HTML5以外で特定のリンクはスムーズさせない

HTML5のカスタムデータ属性を利用したくない場合は、smoothScroll.jsの14行目を次のように変更してください。

var attr ="data-tor-smoothScroll";

↓

var attr ="class";

そうするとclass属性に対して「noSmooth」を指定することでスムーズを抑制することができまるようになります。

MITライセンスで公開しておりますのでご自由にご利用ください。

修正情報

2011/02/13 カスタムデータ属性を利用したスムーズの抑制機能を追加しました。
2010/08/31 Google Chromeで動かない。ページ下部へのスクロールがスムーズではないときがある等のバグを修正しました。

関連エントリー

アルファ画像を扱うalphafilter.jsライブラリ
ie以外でもクリップボードが使えるsetClipboard.js
一番簡単な画像置換の方法-imageReplace.js-
AjaxやJavaScriptのライブラリー

スポンサードリンク

«FeedReaderをFastladderに変更 | メイン | jsライブラリで実装する効率的なWeb制作(Web標準の日々)»