スムーススクロールの実現方法はいろいろあるけれど、他のページのアンカーへもスムーススクロールするスクリプトはなかなか見当たりません。jQuery+interface.jsはそのままだと他のページのアンカーへのリンクが効かなくなってしまうし、tinyscrolling.jsは普通にジャンプするだけ。スムーススクロールの最大のメリットは、ページのどこからどこまで移動したかをユーザが直感的に把握しやすいことだけれど、それだったら他のページのアンカーにもスムーススクロールしたいよね、ということで自分で作ってみました。

サンプル mintscroll.js

• 「標準DOMスクリプティング JavaScript＋DOMによるWebアプリデザインの基礎」を参考にし、dom.jsを先に読み込んでいます。
• tinyscrolling.jsでは、ページ内リンクをクリックした時点でアンカーの位置を取得して計算していますが、mintscroll.jsでは、ページを読み込んだ時点でaタグ要素にあらかじめアンカーの位置を持たせてあります。また、スクロールエンジンを単純にして、よりスムースな動きを実現できるよう工夫しました。
• 一番外側（サンプルではdiv#wrapper）や一番下（サンプルではdiv#box5）の要素のmargin-bottomによって、ページ下部へのスクロールに誤差が出ます。この誤差はjQuery+interface.jsでもあります。tinyscrolling.jsでは誤差は出ないのですが、ブラウザによっては動きがカクカクしてしまいます。margin-bottomが0pxであれば誤差は出ないので、mintscroll.jsはとりあえずこのままで使うことにしました。
• 他のページへのアンカーは、#以下の部分をクエリ文字列としてリンク先のページに渡しています。
• aタグのhref属性がhttp://あるいはhttps://から始まっている場合は外部サイトとみなしてクエリ文字列を渡していません。内部サイトへのリンクでもhttp://あるいはhttps://から書かないとは限らないのでこのへんは改良の余地があるかと思います。正規表現を勉強して外部サイトと内部サイトの区別をきっちりやりたいです。
• 自分でスクリプトを書いたことによって細かいところがカスタマイズできて便利です。ここでは、リンク先でアンカーをハイライト表示するようにしてみました。
• IE6-8と、Opera、Safari、FFで検証しています。