menu
menu

キーワード検索

 

最近の投稿

JavaScriptでスムーススクロール

  • Labs

JavaScript

こんにちは(・∀・)

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

サンプル

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

HTML

<a href="#hoge" class="ss">Go to hoge</a><--classにssを指定-->

<div id="hoge">hoge</div>
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);
}
Result

サンプルデモはこちら

関連リンク

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

  • カテゴリー:Labs