blue

続々・ページ内リンク(ID)にするするっと移動する

  • Posted by: SOMA Hitoshi
  • August 8, 2007 1:48 PM
  • web

コードを少しだけ修正しました。詳しくは「fdScroller.js ちょこっと改良」を参照ください。

 なかなか最終版がかたまらずすいませんが、「続・ページ内リンク(ID)にするするっと移動する」のつづきというか、それに対して「leva」さんから、「サイト内リンクをスムーズに移動するJavascript プラスワン」というトラックバック記事をもらったことを承けて。同記事では、私が「続・ページ内リンク〜」の記事で紹介したスクリプトに対し、

これには1つ大きな問題があって肝心のサイト内リンクを踏んでも、URIの後ろにフラグメントID(#xxxみたいな)が付かないんですね。
Liner Note - サイト内リンクをスムーズに移動するJavascript プラスワン

という指摘がなされていて、それはまったくごもっとも、たしかに大きな欠点だった。で、つづけて同記事ではその点についての改良案を示してくれているのだが、当初書かれてあったその改造法を試したところ動作の具合がうまくなく、で、私のほうでも代案を示そうと思っていたところが、いまあらためて訪れてみると「leva」さん自身が改造法を修正していた。

 その新しいほうの改造法は私が示そうとしていたものとほとんど同じで、つまり出番はなくなったのだが、一応こちらのほうでも修正版のソースを提示しておくほうがいいだろうと思い、以下にまとめておきます。

 「leva」さんが示している改造法が、こちら。(元のソースの94行目あたり)

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

 「05」行目のアタマにある「++」は「追加行」であることを示すもので、つまりこの「05」行目を書き加えるというのが改造部分。で、ソースをよく見てもらえばわかるように、ここで書き加えられている「05」行目のコードというのは、その直前、「03」行目のところでコメントアウトされているコードとほとんど同じものなのである(if文の条件分岐を伴っているところと、「location.href」でなく「location.hash」であるところがちがいますが)。

 繰り返し説明しておくと、私が紹介しているこのJavaScriptは私のオリジナルではなくて、海外のサイト「frequency decoder」で使用されている外部jsファイルのなかにこれが組み込まれているのを見つけ、そこからページ内スクロール機能の部分だけを取り出して、単機能の外部jsファイルとして動くように手を加えたものです。そんなわけで、元のソースにおいてなぜこの部分がコメントアウトされていたのか、またなぜ条件分岐つきのかたちなのか、そこがちょっとわからないというか現時点で推測がつかないのですが、「これ、コメントアウトを外せば解決なんじゃない?(ただし条件分岐も取り払います)」というのが私の示そうと思う修正案です。

 「leva」さんのコードとのちがいがわかるように示せば、こう。

  1. if(Math.abs(top-fd.pageScroller.requestedY) <= 1 || fd.getScrollTop() == top) {
  2.             window.scrollTo(0, fd.pageScroller.requestedY);
  3.             location.hash = fd.pageScroller.hash;
  4.             fd.pageScroller.hash = null;

 この修正を含めた最新版の全コードをあらためて提示しておけば、こうです。

 あ、あと、別の話になりますが、「IE6および7で、スクロールダウンが極端に遅いのはなぜ?(スクロールアップは速いのに)」という質問をもらい、直接はここのコメント欄で答えたのですが、ここにも要点だけ書いておけば、これ、HTMLのアタマにXML宣言があると(IE6および7では)その症状が出るようです。どういう道理なのかはわかりませんが、検証の結果どうもそうらしいことが判明しました。

関連記事

トラックバック(1)

トラックバックURL: http://web-conte.com/blue/mt-tb.cgi/160

以下のリストにある記事は、当記事 " 続々・ページ内リンク(ID)にするするっと移動する " を参照しています :

 「続々・ページ内リンク(ID)にするするっと移動する」等の記事で紹介したfdScroller.jsだが、ほんの少しだけコードを書き足し、以前から気づいて...

2008年11月19日 02:16