スライドスクロールページ内リンク jQuery.slideScroll.js

memo: Easingプラグインで実現するスクロールの方がきれいにスクロールできるのでおすすめです。

jQuery.slideScroll.jsはよくあるページ内リンクをスクロールさせるやつです。
スクリプト内でjQueryはほとんど使ってなくてjQueryプラグインな必要もあんまりない感じですが
アンカーの指定がし易いのと僕がjQueryを99％使ってるのとでjQueryプラグインになってます(*1。

*1) jQuery非依存版もあります

スクロール型のページ内リンクは
僕がJavaScriptをやってみようと思ったきっかけでもあって いつか自作できたらいいなぁと思ってたのでした。

jQuery.slideScroll.jsのサンプルを見る
5509でも読み込むようにしたのでサイト中のページ内リンクでも確認できます。
(トピックスがページ内リンクになってるのでそこで確認できます。)
現在はeasingScrollを使っています。

トピックス

• ダウンロード
• 導入方法
• 設定
• サンプル
• 追記・更新履歴
• 動作環境

ダウンロード

jQuery.slidescroll.jsはjQuery1.2.6が必要になります。(サンプルファイルには含まれています。)
jQuery非依存はslidescroll.jsの記事に書きました。

JSファイル

jquery.slidescroll.js(3KB)

サンプルファイル

jqueryslidescroll.zip(21KB)

導入方法

スクリプトファイルを以下のように読み込み、

head内か任意のJSファイルで以下のようにアンカーに適用します。
ちなみにa[href*='#'] でhref属性に#(ハッシュ)を含むアンカーと絞れます。
([href*='#']部分は別になくても動くんですが)

タブスクリプトと併用する場合は、うまくいかなくなると思うんですけど
例えば下みたいなタブのアンカーを除外したい時は、

• tab1
• tab2

適用するアンカーをfilterで絞ります。

$(function(){
$("a[href*='#']").filter(function(){
return !$(this).parent().parent().hasClass("tab");
}).slideScroll();
});

上記の場合は、a要素の親の親(ul要素)のクラスにtabがある場合は除外 ということになってます。
自分で作ったタブスクリプトならfilterもなしでいいんですけど、一般的にはこんな感じです。

設定

実行速度とスクロール量

スクロールの実行速度とスクロール量の微調整が出来ます。

$("a[href*='#']").slideScroll({
interval: 20, // 10～20あたり
easing: 0.6 // 0.4～2.0くらいまで
});

interval: 10、easing: 1.5とかだと 下りのときに最後カクってなります。。。

サンプルはないんですが、横移動も対応してます。

外部ハッシュリンク

外部ハッシュリンクにも対応してますが、Webkit(SafariとChrome)でうまく動かないです。。。
正式実装にはなってないので、オプションにしてます。
使いたい場合は、以下で有効にできます。それにしても微妙な動き…

$("a[href*='#']").slideScroll({
comeLink: true
});

その他のこと

下りのeaseOut(ブラウザ表示最大高・幅～ブラウザ最大高・幅-表示高・幅にリンクがある場合)に対応してます。
むしろウリはここくらいか…笑 もしスクロール先の微調整がほしい人がいれば機能追加します。

更新履歴・追記

2008.12.26

別ページへのリンクでハッシュがあり、かつそのハッシュのIDを含む要素がページ内に存在する場合にリンクが無効になっていたので修正しました。

2008.12.25

jQuery非依存版も作りました。

2008.12.24

サンプルにタブの例を追加、外部ハッシュリンクをオプションにしました。

動作環境

Windows: IE6, IE7, Firefox3, Opera9.5, Safari3, Chrome(Webkitは一部バグあり)で確認