![[PukiWiki]](../../pukiwiki/image/pukiwiki.png "[PukiWiki]")
最終更新:
2008-07-20 (日) 12:10:45
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 と競合したり、スキンとの相性で動かない可能性もあります。 その辺は自己責任でお願いします。
(Counter:1,
Today:1,
Yesterday:0)
