スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[ブログパーツ] Smooth Scroll スクリプトを書いてみた

ページ内リンクの移動をスムーズにするSmooth Scroll

Javascriptのクロスブラウザの勉強がてらにページ内の移動をスムーズに行うJavascriptをSmooth Scrollのブログパーツ作りましたや、ページ内リンクをスマートにするsmoothScroll.js[to-R]を参考に作成してみました。縦だけでなく横スクロールもできるようにしてみました。

デモ

Top

Bottom

使い方、仕様

smoothscroll.jsをダウンロードして,head内でもbody内でもいいので以下のhtmlを追加してください。

<script type="text/javascript" src="smoothscroll.jsのパス"></script>

ページ内での#(ハッシュ)付きのリンクであればスクロールする仕様になっています。

例:

<div id="header">Hoge hoge hoge</div>
<a href="#header">Go to header</a>

対応ブラウザ

  • Firefox
  • Chrome
  • Opera
  • Safari
  • IE 6.0+

スピードの調節など

スクロールスピードを調整したい場合、ソースの先頭にある変数のSPEEDの数字を変えてください。数字を大きくすると遅く、小さくすると速くなります。デフォルトは10になっています。

var SPEED = 10;//大きくすると遅く、小さくすると速くなる

クリックするたびランダムにスピードをかえる。

var SPEED = Math.max(5,parseInt(Math.random() * 50));

適当にダウンロードして使ってください。

ソース

/*
 * Smooth anchor scrolling
 * @license : MIT License
 * @url     : http://jsfirefox.blog39.fc2.com/
 * @version : 1.0.0 
 * @Date    : 2011-04-30 00:00:00 (Satuday, 30 April 2011)
 * Copyright (c) 2011 Yamapikarya
 */
(function(){
	var SPEED = 10;
	
	var Lib = {
		onReady: function(callback){
			if(document.addEventListener){
				document.addEventListener('DOMContentLoaded',function(evt){
					document.removeEventListener(evt.type,arguments.callee,false);
					callback(evt);
				},false);
			}
			else
			if(document.attachEvent){
                document.attachEvent('onreadystatechange',function(evt){
                    if(document.readyState === 'complete'){
                        document.detachEvent('onreadystatechange',arguments.callee);
                        callback(evt);
                    }
                });
				if(document.documentElement.doScroll && typeof window.frameElement === 'undefined'){
                    (function(){
                        try{
							document.documentElement.doScroll('left');
                        }
						catch(e){
							setTimeout(arguments.callee,0);
							return;
                        }
						callback();
                    })();
                }
			}
		},
		addEvent: function(node,type,callback,useCapture){
			if(node.addEventListener){
				node.addEventListener(type,callback,(useCapture || false));
			}
			else
			if(node.attachEvent){
				node.attachEvent('on'+type,callback);
			}
		},
		removeEvent: function(node,type,callback){
			if(node.removeEventListener){
				node.removeEventListener(type,callback,false);
			}
			else
			if(node.detachEvent){
				node.detachEvent('on'+type,callback);
			}
		},
		getElementPosition: function(node){
			var position = {
				x: 0,
				y: 0
			};
			while(node){
				position.x += node.offsetLeft;
				position.y += node.offsetTop;
				node = node.offsetParent;
			};
			return position;
		}
	};
	
	var SmoothScroll = {
		init: function(){
			var self = this;
			Lib.onReady(function(){
				Lib.addEvent(document,'click',self.run);
			});
		},
		run: function(evt){
			var self = SmoothScroll;
			evt = evt || window.event;
			var target = evt.target || evt.srcElement;
			if(!evt.button && target.tagName === 'A' && target.hash){
				if(location.href.replace(new RegExp(location.hash + '$'),'') !== target.href.replace(new RegExp(target.hash + '$'),''))
					return;
				var linkId = target.hash.replace(/^#/,'');
				var targetNode = document.getElementById(linkId);
				if(!targetNode)
					return;	
				if(typeof evt.preventDefault === 'function'){
					evt.preventDefault();
				}
				else{
					evt.returnValue = false;
				}
				var aPosition = Lib.getElementPosition(target);
				var tPosition = Lib.getElementPosition(targetNode);
				self.scroll(aPosition,tPosition);
			}
		},
		timer: null,
		scroll: function(aPos,tPos){
			this.stop();
			var self = this;
			
			var sh = document.documentElement.scrollHeight;
			var wh = window.innerHeight || document.documentElement.clientHeight; 
			var currentY = document.documentElement.scrollTop || document.body.scrollTop || 0;
			var targetY  = Math.min(sh-wh,tPos.y);
			var isScrollY = true;
			var isDown = false;
			var remainY = currentY < targetY ? (isDown = true,1): -1;
			
			var sw = document.documentElement.scrollWidth;
			var ww = window.innerWidth || document.documentElement.clientWidth;
			var currentX = document.documentElement.scrollLeft || document.body.scrollLeft || 0;
			var targetX  = Math.min(sw-ww,tPos.x);
				targetX  = ww < targetX ? targetX: Math.floor(targetX/2);
			var isScrollX = true;
			var isRight = false;
			var remainX = currentX < targetX ? (isRight = true,1): -1;
			
			this.timer = window.setInterval(function(){
				var x = (targetX - currentX) / SPEED + remainX;
				var y = (targetY - currentY) / SPEED + remainY;
				if((isRight && currentX <= targetX) || (!isRight && currentX >= targetX)){
					currentX += x;
				}
				else{
					isScrollX = false;
				}
				if((isDown && currentY <= targetY) || (!isDown && currentY >= targetY)){
					currentY += y;
				}
				else{
					isScrollY = false;
				}
				
				if(isScrollX || isScrollY){
					window.scrollTo(currentX,currentY);
				}
				else{
					self.stop();
				}
			},13);
		},
		stop: function(){
			window.clearInterval(this.timer);
		}
	};
	
	SmoothScroll.init();
})();

参考


FC2ノウハウ
関連記事

Tag : javascript ブログ カスタマイズ ブログパーツ

プロフィール

Yamapikarya

Yamapikarya

Firefox アドオンとかを開発してます。

最新記事
最新コメント
カテゴリ
月別アーカイブ
検索フォーム
RSSリンクの表示
QRコード
QR
その他
  • あわせて読みたい
アフィリエイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。