このページの目次

ページの先頭へ smoothscroll

概要

ページの先頭へ戻るときにスムーズにスクロールしながら戻れるようにするスクリプトです。

HTML 内に onclick 属性等を追加しないでいいので、綺麗な HTML ソースを保つことができます。この JavaScript を読み込むだけで動作するので、運用中の Web サイトへこの機能を追加することも容易です。

Web Graphics の A (slightly) better technique for “Back to Top” links.で公開されているスクリプトに追記させていただきました。

説明

例えば、ページの先頭へ戻るのhrefの値を

<a href="#header">ページの先頭へ戻る</a>

のようにしている場合、このスクリプトの最初にある backToTopBootConftopFlag の内容は#headerと設定して HTML ファイルの head 要素内などで読み込んでください。

ソースコード

このスクリプトでは、デフォルトを #header としてあります。任意で Web サイトに合わせて変えてください。

/*====================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////

 Author : http://www.yomotsu.net
 Licensed under the GNU Lesser General Public License version 2.1
 
 ページの先頭へスクロールさせるスクリプト

//////////////////////////////////////////////////////////////////////////////////////////////////////
====================================================================================================*/

var backToTop = {
	conf : {
		topFlag : "#header" //"ページの先頭へ戻る"のhrefの値
	},
	
	main : function () {
		var x1 = x2 = x3 = 0;
		var y1 = y2 = y3 = 0;
	
		if (document.documentElement) {
			x1 = document.documentElement.scrollLeft || 0;
			y1 = document.documentElement.scrollTop || 0;
		}
	
		if (document.body) {
			x2 = document.body.scrollLeft || 0;
			y2 = document.body.scrollTop || 0;
		}
	
		x3 = window.scrollX || 0;
		y3 = window.scrollY || 0;
	
		var x = Math.max(x1, Math.max(x2, x3));
		var y = Math.max(y1, Math.max(y2, y3));
	
		window.scrollTo(Math.floor(x / 1.3), Math.floor(y / 1.3));
	
		if (x > 0 || y > 0) {
			window.setTimeout("backToTop.main()", 25);
		}
		else if (navigator.userAgent.indexOf("AppleWebKit") == -1){
			location.href = backToTopBootConf.topFlag;
		}	
	},
	
	set : function () {
		var a = document.links;
		for(i=0;i<a .length;i++){
			if(new RegExp(backToTop.conf.topFlag + "\\b").exec(a[i].href)) {
				
				a[i].onclick = function(){
					this.removeAttribute("href")
					backToTop.main();
					this.setAttribute("href",backToTop.conf.topFlag);
					return false;
				}
			}
		}
	},
	
	addEvent : function(){
		try {
			window.addEventListener('load', backToTop.set, false);
		} catch (e) {
			window.attachEvent('onload', backToTop.set);
		}
	}
}

backToTop.addEvent();


トラックバックURI

http://www.yomotsu.net/lab/javascripts/scrolltotop/trackback

この記事へのコメントはまだありません

コメントフォーム

コメント

コメントでは一部の XHTML タグを使用できます。 : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

実験室に戻る

著作権情報等

Copyright © 2004-2008 yomotsu-net. Some Rights Reserved.