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

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

Posted by: SOMA Hitoshi
October 24, 2006 4:36 PM
web

「続・ページ内リンク（ID）にするするっと移動する」のほうで改良版のスクリプトを紹介しています。そちらも参照ください。

ブログでもサイトでもよく見る「このページの先頭へ」のリンク。長～いページだとそのリンクで一瞬に先頭に行ってしまい、読んでいる人が混乱することもよくあります。
そこでご紹介したいのが「するするるーーー」と先頭まで戻ってくれるJavascript。このページの先頭へ、をちょこっとおしゃれに | S i M P L E * S i M P L E

これはいいと思った。視覚効果としての楽しさもそうだが、いわゆる「ページ内リンク」の弱点をカバーしてくれるという点で好ましく思われる。というのも、ページ内リンクというやつはときに「リンクの結果自分がいったいどこに飛ばされたのかわかりにくい」からだ（「このページの先頭へ」の場合にはあらかじめどこに行くかが意識されているはずだからそれほど問題ないと思うが、それ以外の場合に）。

ユーザたちは、リンクをたどるときの明確な思考モデルを形成済みで、それはいくつかの要素に分けることができる。

リンクをクリックすることは、別の場所に移動する。

クリックすると、前にみていたページは消える。

新しく読み込んだページはウィンドウに読み込まれ、前にみていたページと入れ代わる。

まずは、新たに読み込んだページの最上部がみえる。

戻るボタンは、以前のページに戻る。

ほとんどのクリックがこのような動作をするため、ユーザたちは、ウェブがこのように機能するだろうという、強い期待値を持っている。論理的で、簡単な思考モデルだ。

ユーザたちの思考モデルの全 5 要素すべてにページ内リンクは反している。Alertbox: ページ内リンクの使用は避けよう（2006年2月21日）

とはいえ、（少なくとも作る側からすると）ページ内リンクにはページ内リンクの利点があり、そうそう簡単に手放せるものではなく、そこで前掲のギミックである。ページ内の移動の場合もともとウィンドウはスクロールしているわけだが、混乱のもとはそれが一瞬であるということだ。じっさいにスクロールしている様を見せることにより、別ページに飛んだのではなく、同じページ内を下に（あるいは上に）移動したのだとユーザーに意識させることができる。「スクロールのアニメーションに付き合う」と言っても、うっとうしいほどの時間をとられるわけではない（と私は思う）。

で、その JavaScript を導入してみようとよくよく記事を読んでみると、これは私の思っていたものとちょっと異なるのだった。まず第一にここで紹介されているスクリプトは「ページトップに戻る」場合に特化されていて、ページ内リンク一般に適用することができない。加えてわがままを言うなら、リンク部分に onclick イベントを追加しないといけないから、既存のページに適用するには手間が要る。

というわけで、ページ内リンク一般に対して適用可能なバージョンの紹介。ようやく本題。

えーと、以下に紹介するソースは私の考えたものではありません。答えはすでに先人が用意してくれていた。というか、これ、似たようなことはすでに誰かが思いついていてよさそうなものだと思い、リンクを辿っていったら案の定あった。

「このページの先頭へ、をちょこっとおしゃれに」の記事の元ネタとして紹介されているのが英文記事の「A (slightly) better technique for "Back to Top" links.」で、そのコメント欄に、「似たようなスクリプトだけど、俺はこんなのを作ったよ」と書き込まれているのがそれ。コメント内にはそのスクリプトが組み込まれたページ（およびその外部 JavaScript ファイル）へのリンクが案内されているが、じっさいに稼働しているスクリプト作者のブログであるため目当てのもの以外のスクリプトも混じっている。必要な部分だけを抜き出すと以下のようになる。

// Unobtrusive scroller object
var fdScroller = {
	scrollLoop:false,
	scrollInterval:null,
	currentBlock:null,
	lastY:0,
	requestedY:0,
	init: function() {
		var lnks = document.getElementsByTagName('a');
		var removeLoc = window.location + ' ';

// strip any #target, force a String cast
		if(removeLoc.indexOf('#') != -1) {
			removeLoc = removeLoc.substr(0, removeLoc.indexOf('#'));
		} else {
			removeLoc = removeLoc.substr(0, removeLoc.length - 1);
		}

for(var i = 0, lnk; lnk = lnks[i]; i++) {
			tmploc = lnk.href.replace(removeLoc,'');
			if(tmploc.charAt(0) == '#' && !lnk.onclick) lnk.onclick = fdScroller.initScroll;
		}
	},
	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;
	},
	getScrollLeft: function(){
		if(document.all) return (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
		else return window.pageXOffset;
	},
	getScrollTop: function(){
		if(document.all) return (document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
		else return window.pageYOffset;
	},
	getElementYpos: function(el){
		var y = 0;
		while(el.offsetParent){
			y += el.offsetTop
			el = el.offsetParent;
		}
		return y;
	},
	initScroll: function(e){
		var targ;

if (!e) var e = window.event;
		if (e.target) targ = e.target;
		else if (e.srcElement) targ = e.srcElement;
		if (targ.nodeType == 3) targ = targ.parentNode;

if(targ.href && targ.href.indexOf('#') != -1) {
			var where = targ.href.substr(targ.href.indexOf('#')+1,targ.href.length);
			fdScroller.currentBlock = document.getElementById(where);
			if(!fdScroller.currentBlock) return;

var documentHeight = document.getElementsByTagName('body').offsetHeight;
			var windowHeight = fdScroller.getWindowHeight();
			var ypos = fdScroller.getElementYpos(fdScroller.currentBlock);
			if(ypos > documentHeight - windowHeight) ypos = documentHeight - windowHeight;
			fdScroller.requestedY = ypos;
			fdScroller.scroll();
		}

return false;
	},
	scroll: function(){
		var left = fdScroller.getScrollLeft();
		var top  = fdScroller.getScrollTop();

if(Math.abs(top-fdScroller.requestedY) <= 1){
			window.scrollTo(0,fdScroller.requestedY);
			fdScroller.lastY = -1;
		} else {
			fdScroller.lastY = top;
			window.scrollTo(0, Math.round(top+((fdScroller.requestedY-top)/2)));
			setTimeout(fdScroller.scroll,50);
		}
	}
}

var hoge_fdScroller = window.onload;
window.onload = function() {
	if(hoge_fdScroller != null) hoge_fdScroller();
	fdScroller.init();
}

これをコピーして、「fdScroller.js」なりなんなり、外部 JavaScript として保存、HTMLからリンクを張ってやればOK。すべてのページ内リンク（ID属性で名前を与えたセクションへの移動）に「するするっとスクロールするアクション」が適用される。はず。

トラックバック(1)

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

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

ページ内リンクをなめらかに移動するJavaScript from XilabBlog

タイトルの通り、ページ内リンクの移動をなめらかにするJavaScriptです。 ...

2007年1月 6日 20:08

DIO

はじめまして、
私は、音楽に関するサイトを作っているものですが、
このスクリプトを使わせいただいています。どうもありがとうございます。
その中で、問題といいますかかわからない事がありまして
投稿させていただきました。
お伝えしにくいのですが、
ホームページの最下層付近に、IDを設定設置して
TOPからリンクした場合、目的の場所まで移動できなくなり
スクリプトが終わらないという状態になる事です。

こんな感じになるのですが…

何か対策があれば教えていただきたいのですが。
私は、あまりプログラムはわからないものでよろしくお願い致します。
古いブログからで申し訳ないですがよろしくお願いします。

dio

失礼しました。

↓実際こんな感じになります。
http://cgi.geocities.jp/dio_brand_o/yukiwiki/wi...

SOMA Hitoshi

> DIOさん
どうもはじめまして。おっしゃりたいことはわかります。
この記事のあとで、「続・ページ内リンク（ID）にするするっと移動する」と「続々・ページ内リンク（ID）にするするっと移動する」という２本の記事を追加、そのなかで件の問題等を解決しています。ので、そっちで提示している最新版スクリプトのほうを利用してみてください。

DIO

ご返答ありがとうございます。
最新版があるとは、ちょっとスクリプトの面白さに興奮して
気付きませんでした。
早速試したのですが、「続々・ページ内リンク（ID）にするするっと移動する」の記事で
おっしゃっているとおり、スクロールがスローになります。

コメント欄の
のソースを削除するいうお話ですが、
私の作っているサイトには、そういったソースはないのですが…
単純に意味が解かっていないのならお恥ずかしいです。

SOMA Hitoshi

http://www.band-is-life.com/のトップページのソースに最新版スクリプ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

という一文を、HTMLの1行目（<HTML>タグの手前）に加えてみてください。

DIO

おはようございます。ご返信有難うございます。
今朝試してみました、トップのページに

を入れてみたのですが、スクリプトに動作するのですが
今度はタグの論理強調の部分の文字が
上部が擦り切れて表示されてしまうようになりました。
例えば、トップの『無料ダウンロードを集めよう』の『う』が『つ』みたいに
なります。（笑）
どうも、私には困難なようですので諦めます。有難う御座いました。

DIO

またやってしまいました…
＜strong＞タグです。

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

関連記事

トラックバック(1)

コメント

最近のエントリー (blue)

検索

Tags Most Used (All)

カテゴリー

アーカイブ

リンク

広告

日記