jqueryによるスムーズスクロールは、探せば結構な数あるかと思うのですが、アンカーに対して動作するものが殆どで、同じくアンカーを使って動作するタブ切り替えのスクリプトなんかとぶつかることがないですか？そんなときお勧めしたいのがコリスさんとこのPage Scrollerです。
設置は一般的なjQueryプラグインと同様に、jQueryのjsファイルと、上記よりダウンロードしたPage Scrollerのファイルをヘッダで読み込むだけ。あとはアンカーに対して普通にリンクするのみです。
さて設置はさくっといけるとおもうのですが、前述の通り問題は他のスクリプトと干渉しあうことでした。タブ切り替えのjsなんかでidを使って識別しているスクリプトですと、aタグに#hogeのようなリンクが埋めこまれている場合に反応してしまってタブ切り替えの際に一回スクロールが起こっちゃうなんて微妙な動きになることがあります。
そんなときこのスクリプトは、アンカーリンクをエスケープする処理をクラスで設定することが可能です。
動作しないエリアを設定する方法
※idがかぶっていてアンカーが効かないので、一個上の項目にリンク張っています。
詳細は上記リンクにありますが、要はclass=”nopscr”というクラスをアンカーリンクの入ったaタグに当てるだけ。たったそれだけでOKでした。すごく便利。タブを併用することが多いので、とても助かりました。
このスクリプト色々と高性能で様々な設定ができまして、最新バージョンではスピードの設定もできる・・・はずなのですが、解説に書いてある変数を設定してもそれほど劇的な変化がありませんでした。
スピード以外の動作が完璧でしたので今更他のスクリプトを使う気になれず、申し訳ないのですがコードを読んで、スクロール処理中のとある変数に直接値を代入して対応しました。frmsの値を直に書き換えると、割と目立って動作スピードが 変わります。一応、ご参考までに。
商用利用は最新バージョンから可、とのことですので、お仕事で使用する際にはライセンスにご注意ください。
以上、スムーズスクロールのご紹介でした。