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

blue

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

Posted by: SOMA Hitoshi
July 23, 2007 9:51 PM
web

以下に紹介しているスクリプトでは「肝心のサイト内リンクを踏んでも、URIの後ろにフラグメントID（#xxxみたいな）が付かない」という指摘があり、それをもとに修正したものを「続々・ページ内リンク（ID）にするするっと移動する」にて紹介していますので、現時点での最新版スクリプトとしてはそちらを参照ください。

2006年10月に紹介した「ページ内リンク（ID）にするするっと移動する」ためのJavaScriptだが、このスクリプトにはじつは、「はんこ、いりますか？」の「番頭」さんも指摘するとおりの弱点がある。

番頭の環境(WindowsXP SP2 / Firefox1.5.0.9)では、リンク先のIDが画面下のほうにあるとき、延々と下にスクロールし続ける(スクロールバーで上に移動しようとしてもすぐ一番下まで下がる)と言う不具合が。
(リンクで指定した場所がウインドウの一番上に来るまでスクロールし続ける仕様なのではないかと思います)
はんこ、いりますか？ » ページ内リンクをアニメーションで

そうなんですよ、はい。知ってました。（なんだけど、私としてはひとまず「仕様」と割りきってほうってあった。）

今回、「番頭」さんの記事をきっかけにふたたびこのスクリプトのオリジナル作者のサイト（「frequency decoder」）へ行き、「その後どうなってるかな」というのを覗いてきたというのは、この「弱点」、考えてみれば比較的容易に気づかれるはずのものだから、すると「これ、どうにかならないかなあ」という声も届きやすく、オリジナル作者がすでに対応／改良している可能性が高いと踏んだからだ。で、やっぱり思ったとおりで、オリジナル作者のサイトでは該当するスクリプトがちがうものに置き換わっていた。それが、これ（「frequency decoder」で使われている外部jsファイルから該当する部分のみを抜き出し、少しだけ編集したもの）。

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);
			//if(!document.all || window.opera) 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();
}

ま、つまるところずいぶん書き換わってるわけですがね、前回同様これをコピーして、「fdScroller.js」なりなんなり、外部jsファイルとして保存、HTMLからリンクを張ってやればOKである。

どうっすかね、「番頭」さん。

トラックバック(2)

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

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

fdScroller.js 画像リンクでダメ？ from web-conte.com

　「続・ページ内リンク（ID）にするするっと移動する」で紹介したページ内スクロールのためのJavaScript（仮称：fdScroller.js）に対して...

2007年8月 3日 15:02

サイト内リンクをスルスル移動するJavascript プラスワン from Liner Note

ページ内リンクをするするっと移動するスクリプトを、移動時にきちんとリンクアンカーが付くよう改造してみました [続きを読む]...

2007年8月 6日 13:12

リンク

日記

January 5 / ワールドニュースの気になるアイツと、海苔を食べるのが下手なアイツ
January 4 / カレーチャーハン
January 3 / リモート同窓新年会
January 2 / 散歩
January 1 / 新年
April 9 / 池袋で『流れる』
April 8 / ご無沙汰です
April 9 / テレビが壊れた
July 17 / とりあえず『乃木坂46のドラマトゥルギー』のことをば
July 16 / 皆さんこんばんは、日向坂46の森本茉莉です

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

関連記事

トラックバック(2)

最近のエントリー (blue)

検索

Tags Most Used (All)

カテゴリー

アーカイブ

リンク

日記

広告