menu
menu

キーワード検索

JavaScriptでスムーススクロール

  • Labs

JavaScript

こんにちは(・∀・)

JavaScriptを使用したサンプルをご紹介します。今回はスムーススクロールです。

サンプルデモ

サンプルデモはこちら

スムースにページ内をスクロールさせたいa要素にclass="ss"を指定します。

JavaScript

function scroll(){
var ssobj = document.getElementsByTagName('a');
for(var i=0; i < ssobj.length; i++){
if(ssobj[i].className == 'ss'){
	ssobj[i].onclick = function(){
	smsc(this);
	return false;
	}
}
}
}
function smoothScroll(){
if (Math.abs(current_y - target_y) < Math.abs(speed)){
	window.scrollTo((document.body.scrollTop || document.documentElement.scrollTop),target_y);
	clearInterval(sstimer);
	return false;
}else{
	window.scrollBy(0,speed);
	current_y += speed;
}
}
function smsc(ssval){
speed = 50;
smooth = 25;
current_y = document.body.scrollTop || document.documentElement.scrollTop;
sspath = '' + ssval;
sstarget = sspath.split('#');
sselement = document.getElementById(sstarget[1]);
target_y = 0;
for (i = sselement;i.offsetParent;i = i.offsetParent){
	target_y += i.offsetTop;
}
if(current_y > target_y){
	speed = -(speed);
}
sstimer = setInterval('smoothScroll()',smooth);
return false;
}
if(window.addEventListener){
	window.addEventListener('load',scroll,false);
}else if(window.attachEvent){
	window.attachEvent('onload',scroll);
}
関連リンク

jQueryでページトップボタン
ページトップボタンとページ内スムーススクロール

  • カテゴリー:Labs