ページ内するする移動
2007 年 4 月 4 日 水曜日乗り遅れている感が漂いますが、ページ内リンクをスムーススクロールする JavaScript に興味を持ったので自分用メモに残しておきます。
「トップに戻る」特化型
まず、 SiMPLE*SiMPLE さんの紹介でご存じの方も多いであろう A (slightly) better technique for "Back to Top" links. 。「トップに戻る」ことにのみ特化しています。
他に、「トップに戻る」ことにのみ特化しているというのであれば Smooth Scroll もあります。
トップに戻るだけならこれで十分です。……なのですが、他のリンクも全部やりたい、と思うとこれだけでは不十分でした。
全体有効 (name)
ページ内リンクでスムーススクロール は、prototype.js が必要です。
また、Smooth scrolling もあります。ただし、この両者に共通するのは name 属性限定と言うこと。気付かずに、なぜ動かないのかと頭を抱えてしまいました。
見出し要素に name 属性は指定できませんので、それは困ります。個別記事表示での「leave a response（コメントをどうぞ）」などにスムーススクロールが効かないのですから。かといってそれら全てに a 要素を指定していくのもわだかまりが残ります。
id 属性でも動くものを探しました。
全体有効 (id)
そこで見つけたのが The Tiny Scrolling。求めていたもの全て、という感じでした。
しかし人は我儘なもので、いくつも JavaScript を読み込むのは面倒だな、と思うようになってきました。
Lightbox ライブラリを moo.fx ベースの Litebox から mootools ベースの Slimbox に乗り換えたこともあって、プラグインの SmoothScroll を使うことにしました。
デモがあるのでそのまま使っています。
WordPress プラグイン利用例
WordPress の新作プラグイン、 WP-Modore でも A (slightly) better technique for "Back to Top" links. のコードが組み込まれていますね。有効化するだけでするするーっとトップに戻るボタンが出現します。
また、最近アップデートされた WP-Footnotes ((記事執筆時点でのバージョンは 1.3.1 。)) でも、オプションでスムーススクロールできるようになっていました。使っているのは Animated Page Scrolling というものみたいです。本当に色々ありますね。
余談
どうも、ページの使いやすさ向上スクリプト Website Options と mootools の相性が良くないようです。仕方無いので Website Options をオフに……。外部リンクを別ウィンドウで開きたいときはキーボードショートカットなどを使ってください。
まだまだ他にも色々なスクリプトがあると思います。実際いくつも見つけました。試してみたいのは山々ですが、安住の地を見つけてしまったので今回はここまでです。
