Liner Note

web-conte.com | blue | 続・ページ内リンク（ID）にするするっと移動する

サイト内リンクを瞬間的にではなくスムーズに移動するJavascriptファイル。ニールセンさんの心配を解消するよいtipsだと思いますし、リニューアル後のサイトでも使う予定なのですが、これには1つ大きな問題があって肝心のサイト内リンクを踏んでも、URIの後ろにフラグメントID（#xxxみたいな）が付かないんですね。

で、とりあえず解決する方法として該当するjavascriptファイルを改造することで対処してみます。

JAVASCRIPTソースコード （ファイル94行目あたり）

if(Math.abs(top-fd.pageScroller.requestedY) <= 1 || fd.getScrollTop() == top) {
            window.scrollTo(0, fd.pageScroller.requestedY);
            //if(!document.all || window.opera) location.hash = fd.pageScroller.hash;
            //fd.pageScroller.hash = null;
++            location.href = '#' + fd.pageScroller.hash;

ちなみにこのスクリプト、body要素にonload属性を付けて云々すると動作しなくなるみたいです、Litebox 1.0との併用で確認しました。

では以上、簡単な改造でした。

正常に動作しないような改造方法になっていたので正常に動作するよう書き直しました。このスクリプトはあらかじめ決められた時間（=フラグメントIDに到達する時間）後にスクロールをストップさせるのですが、その前にリンク移動処理をしていたのが原因でした。

北村 暁さんが指摘されているとおり、リンクを踏んで飛んだ後に、ブラウザの「戻る」で戻ってもリンクがあった位置（飛ぶ前の位置）に戻らないという問題があります
LightBoxと併用すると、閉じるボタンでページが閉じなくなります。これはLightBoxが閉じるボタンに内部リンクを使用しているためです。たとえば以下のように改造すると正常に使えるようになります。

JAVASCRIPTソースコード

--        objBottomNavCloseLink.setAttribute('href','#');
++        objBottomNavCloseLink.setAttribute('href','/');

このバグのため、現在はこのサイトでの導入は一時的に見合わせています。

キーワード：

• ウェブ標準技術絡み
• ツールの制作