最終更新: 2008-07-20 (日) 12:10:45
このページをDeliciousに追加 このページをはてなブックマークに追加 このページをlivedoor クリップに追加 このページをYahoo!ブックマークに追加

PukiWiki のページ内リンクをスムーズスクロール化する

目次

概要

df Smooth Scroll という JavaScript を組み込んで、 ページ内へのリンクをクリックした時に、その箇所までスクロールするようにします。 例えば、以下のような部分がスムーズスクロール化されます。

  • contentsx プラグインで作られる目次
  • footnote のリンク
  • ページ先頭へのリンク (ページの右端にある矢印)

サンプル

当サイトの PukiWiki に組み込んであります。上の目次をクリックしてみて下さい。

インストール

df Smooth Scroll のページ からアーカイブをダウンロードして展開します。

$ unzip df_smooth_scroll.zip

smooth-src-comments.js ファイルを次のように書き換えます。

--- smooth-src-comments.js.orig
+++ smooth-src-comments.js
@@ -53,11 +53,10 @@
         i = window.innerHeight || document.documentElement.clientHeight;
         h=document.body.scrollHeight;
         a = Scroller.scrollTop()
-        if(d>a)
-            if(h-d>i)
-                a+=Math.ceil((d-a)/Scroller.speed)
-            else
-                a+=Math.ceil((d-a-(h-d))/Scroller.speed)
+        if (d>a) {
+            if (d>h-i) d = h-i;
+            a += Math.ceil((d-a)/Scroller.speed);
+        }
         else
             a = a+(d-a)/Scroller.speed;
         window.scrollTo(0,a)
@@ -81,13 +80,11 @@
                   l.onclick = function(){
                       Scroller.end(this);
                     l=this.hash.substr(1);
-                     a = document.getElementsByTagName('a');
-                     for (i=0;i<a.length;i++) {
-                         if(a[i].name == l){
-                             clearInterval(Scroller.interval);
-                             Scroller.interval=setInterval('Scroller.scroll('+Scroller.gy(a[i])+')',10);
-                        }
-                    }
+                a = document.getElementById(l);
+                if (a) {
+                    clearInterval(Scroller.interval);
+                    Scroller.interval=setInterval('Scroller.scroll('+Scroller.gy(a)+')',10);
+                }
                 }
               }
         }

修正したファイルを PukiWiki の skin ディレクトリにコピーします。

$ cp -p smooth-src-comments.js skin/

最後に、スキンのファイル (skin/pukiwiki.skin.php, skin/default.skin.php など) に以下のような行を追加して下さい。通常は <head>〜</head> のどこかに書けば良いです。

(PukiWiki の場合)
<script type="text/javascript" src="<?php echo SKIN_DIR ?>smooth-src-comments.js"></script>

(PukiWiki Plus! の場合)
<script type="text/javascript" src="<?php echo SKIN_URI ?>smooth-src-comments.js"></script>

私のところではこれで動作しましたが、 実は、無改造の PukiWiki の場合はもう少し修正が必要なようです *1。 詳しくは、以下のページをご覧下さい。

備考

最小限の修正を施しただけなので、 他の JavaScript と競合したり、スキンとの相性で動かない可能性もあります。 その辺は自己責任でお願いします。

*1 非標準のスキンを使ったり、静的 URL に偽装したりしていたので、そのおかげで偶然動いていました。

(Counter:1, Today:1, Yesterday:0)
トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   最終更新のRSS