ページ内するする移動

乗り遅れている感が漂いますが、ページ内リンクをスムーススクロールする 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 をオフに……。外部リンクを別ウィンドウで開きたいときはキーボードショートカットなどを使ってください。

まだまだ他にも色々なスクリプトがあると思います。実際いくつも見つけました。試してみたいのは山々ですが、安住の地を見つけてしまったので今回はここまでです。

タグ: ,

コメントをどうぞ