概要
ページの先頭へ戻るときにスムーズにスクロールしながら戻れるようにするスクリプトです。
HTML 内に onclick 属性等を追加しないでいいので、綺麗な HTML ソースを保つことができます。この JavaScript を読み込むだけで動作するので、運用中の Web サイトへこの機能を追加することも容易です。
Web Graphics の A (slightly) better technique for “Back to Top” links.で公開されているスクリプトに追記させていただきました。
説明
例えば、ページの先頭へ戻るのhrefの値を
<a href="#header">ページの先頭へ戻る</a>
のようにしている場合、このスクリプトの最初にある backToTopBootConf のtopFlag の内容は#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
この記事へのコメントはまだありません
コメントフォーム
実験室に戻る