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

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

Posted by: 相馬称
2007年8月 8日 13:48
web

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

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

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

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

　「leva」さんが示している改造法が、こちら。（元のソースの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;

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

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

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

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

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

fd = new Object();
fd.onLoad = function(e) {
	for(var module in this) {
		if(this[module].onLoad) this[module].onLoad();
	}
}
fd.getDocumentHeight = function(){
	return (document.height) ? document.height : (document.body.offsetHeight) ? document.body.offsetHeight : 0;
}
fd.getWindowHeight = function(){
	var myHeight = 0;
	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		myHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		myHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		myHeight = document.body.clientHeight;
	}
	return myHeight;
}
fd.getScrollTop = function(){
	if(document.all) return (document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
	else return window.pageYOffset;
}
fd.getElementYpos = function(el){
	var y = 0;
	while(el.offsetParent){
		y += el.offsetTop
		el = el.offsetParent;
	}
	return y;
}
/*
Based on an original script by Travis Beckham (http://www.squidfingers.com)
Wrapped into an Object by yours truly
Further enhancements and bug fixs by Marco Rosella (http://www.centralscrutinizer.it)
*/
fd.pageScroller = {
	speed : 1,
	maxStep: 300,
	brakeK: 2,
	hash:null,
	currentBlock:null,
	requestedY:0,
        
	onLoad: function() {
		var lnks = document.getElementsByTagName('a');
		for(var i = 0, lnk; lnk = lnks[i]; i++) {
			if ((lnk.href && lnk.href.indexOf('#') != -1) &&  ( (lnk.pathname == location.pathname) || ('/'+lnk.pathname == location.pathname) ) && (lnk.search == location.search) && lnk.className.search('no-scroll') == -1) {
				lnk.onclick = fd.pageScroller.initScroll;
			}
		}
	},
	initScroll: function(e){
		var targ;
		if (!e) var e = window.event;
		if (e.target) targ = e.target;
		else if (e.srcElement) targ = e.srcElement;
		// Added by f.d: make sure we actually have the A node and a child tag like span or img
		while(targ.tagName.toUpperCase() != "A" && targ.parentNode) targ = targ.parentNode;
                
		fd.pageScroller.hash = targ.href.substr(targ.href.indexOf('#')+1,targ.href.length);
		fd.pageScroller.currentBlock = document.getElementById(fd.pageScroller.hash);

if(!fd.pageScroller.currentBlock) return;
		fd.pageScroller.requestedY = fd.getElementYpos(fd.pageScroller.currentBlock) - 30;
		/*@cc_on@*/
		/*@if(@_jscript_version < 6)
			fd.pageScroller.requestedY += 30;
		/*@end@*/
		if(fd.pageScroller.requestedY < 0) fd.pageScroller.requestedY = 0;

fd.pageScroller.scroll();
		return false;
	},
	scroll: function(){
		var top  = fd.getScrollTop();

if(fd.pageScroller.requestedY > top) {
			var endDistance = Math.round((fd.getDocumentHeight() - (top + fd.getWindowHeight())) / fd.pageScroller.brakeK);
			endDistance = Math.min(Math.round((fd.pageScroller.requestedY-top)/ fd.pageScroller.brakeK), endDistance);
			var offset = Math.max(2, Math.min(endDistance, fd.pageScroller.maxStep));
		} else {
			var offset = - Math.min(Math.abs(Math.round((fd.pageScroller.requestedY-top)/ fd.pageScroller.brakeK)), fd.pageScroller.maxStep);
		}
		window.scrollTo(0, top + offset);
		if(Math.abs(top-fd.pageScroller.requestedY) <= 1 || fd.getScrollTop() == top) {
			window.scrollTo(0, fd.pageScroller.requestedY);
			location.hash = fd.pageScroller.hash;
			fd.pageScroller.hash = null;
		} else {
			setTimeout(fd.pageScroller.scroll,fd.pageScroller.speed);
		}
	}
}

var hoge_scripts = window.onload;
window.onload = function() {
	if(hoge_scripts != null) hoge_scripts();
	fd.onLoad();
}

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

トラックバック(0)

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

コメント(5)

言及しましたlevaです。
実はjavascriptはめっぽう不案内なもので、それも大きいと思うのですが、コメントアウトされていた部分は普通にスルーしてました。お恥ずかしい限りです。
ともあれお返事ありがとうございました。

余談ですが、デフォルトのmaxstep値（≒スクロール速度？）は、どこに移動しているかが分かる程度としては若干早い気がしているので、私の方では値を低めに設定してたりします。

leva at 2007年8月 8日 16:40

お久しぶりです。IDEA-Hの長谷川です。
このするするっとの話題、入りたかったんですが、他人のJavascriptはなかなか読めないので、今日まで入りませんでした。でも、長谷川が運営する「VERYROLL」というサイトでも違う方法でするするっとを実現しています。
http://veryroll.com/

ただ今までしばらくの間、IE6ではするするっとしていませんでした。ナビゲーションを固定にさせてるんですが、長谷川が知る固定方法では、するするっとのJavascriptとぶつかってどっちかを捨てる他ありませんでした。（話が長くなってすいません）で、ここのFeedを読ませていただいているんですが、del.icio.usの「IEで固定座標を指定する方法／ガタガタも回避する」で解決してしまいました。今はIE6でもするするっとしています。

一連の記事の流れからはズレたコメントですいません。ともかく教えていただいてありがとうと言いたくて書き込みました。ありがとうございます。

それから〈総理大臣といえば〉田中角栄は僕です。

hasegawahiroshi at 2007年10月20日 22:27

hasegawahiroshiさん、どうも。
お役に立てて何よりです。
> それから〈総理大臣といえば〉田中角栄は僕です。
あれ？サイトのヘッダーにあるプロフィールによれば同い年（1975年生まれ）ですよね。何でまた角栄？

SOMA Hitoshi at 2007年10月22日 04:27

> 何でまた角栄？
長谷川、新潟人なんです。

hasegawahiroshi at 2007年10月22日 11:36

> 新潟人なんです。
そういうことかあ。

SOMA Hitoshi at 2007年10月22日 11:54

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

トラックバック(0)

コメント(5)

コメントする

最近のエントリー

カテゴリー

アーカイブ

検索

リンク

だれかのカメラ

広告