スライドスクロールページ内リンク slideScroll.js (jQuery非依存)

先日のjQuery.slideScroll.jsでjQuery無しでも動くようにしてほしいと要望があったので
jQueryなしの単体で動作するように微妙に書きなおしました。

こちらはアンカーの指定は出来ずにすべてのページ内リンクに対して動作しますので
タブとかがあるとそこの動きはおかしくなります。タブも使う場合はjQuery依存のほうを使ってください…

slideScroll.jsのサンプルを見る

トピックス

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

ダウンロード

JSファイル

slidescroll.js(1.6KB)

サンプルファイル

slidescroll2.zip(4KB)

導入方法

スクリプトファイルを以下のように読み込むだけです。

読み込むだけで全てのページ内リンクに適用します。

設定

実行速度とスクロール量

スクロールの実行速度とスクロール量の微調整が出来ます。
slidescroll.jsスクリプトファイル内の17・18行目を変更します。

var interval = 20;
var easing = 0.6;

interval: 10、easing: 1.5とかだと 下りのときに最後カクってなります。。。
こちらも横移動に対応してます。

外部ハッシュリンク

外部ハッシュリンクにも対応してますが、Webkit(SafariとChrome)でうまく動かないです。。。
正式実装にはなってないので、オプションにしてます。
使いたい場合は、スクリプトファイル内19行目を以下のように変更します。

var comeLink = true;

その他のこと

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

更新履歴・追記

2008.12.25

ドキュメントはほとんどjQuery依存のと変わらないですけど。。

動作環境

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