scrollBy - ページ内リンクをスムーズにスクロールする
ページ内リンクをJavaScriptでスムーズにスクロールするサンプルを紹介する。
id属性を持ったタグにも有効な方法なので、アンカーを改めて設置する必要がない。 スクロール速度の調整も単純なつくりになっているので活用していただきたい。
Scroll(this,'pos1')
上記の呼び出しでページ内のid属性をもつ位置までスクロールする。
（サンプルを実行）
実際のJavaScriptコード
<script language="javascript">
var eventTimer; // タイマー変数
var restScroll=0; // スクロール残量
function Scroll(base,move){
// 移動元(base)要素＆オブジェクトを取得
var obj_base = getElemPosition(base);
// 移動先(move)要素＆オブジェクトを取得
var elem_move = document.getElementById(move);
var obj_move = getElemPosition(elem_move);
restScroll = obj_move.y-obj_base.y;
eventTimer = setInterval(setScrollPosition,10);
}
// スクロール処理をする
function setScrollPosition() {
var moveValue=0;
// スクロール残量が80以上の場合、スクロール量を変える
// Math.abs()では値の絶対値を取得
if(Math.abs(restScroll)>80){
moveValue = (restScroll>0)?20:-20;
}else{
moveValue = Math.round(restScroll/4);
}
// スクロールを処理
parent.scrollBy(0,moveValue);
// スクロール残量を計算して、残りが無ければタイマー解除
restScroll = (restScroll>0)?restScroll-moveValue:restScroll-moveValue;
if(moveValue==0){
clearInterval(eventTimer);
restScroll=0;
}
}
// 要素の位置を取得し、オブジェクトとして返す
function getElemPosition(elem) {
var obj = new Object();
obj.x = elem.offsetLeft;
obj.y = elem.offsetTop;
// 親要素を取得して位置情報を修正する
while(elem.offsetParent) {
elem = elem.offsetParent;
obj.x += elem.offsetLeft;
obj.y += elem.offsetTop;
}
return obj;
}
</script>
スクロール処理はインターバル（タイマー）処理を利用している。 タイマーで呼び出される度に、スクロールを行い、スクロール量が無くなった時点でタイマーを解除している。
クリックした位置に指定した要素（idタグ）が来るようにスクロール調整している。
サイトの最新情報をRSSで受信できます
- 関連記事 リスト
Smooth Scroll して画面の上に戻るJavaScript
最近よく見かけるSmooth Scroll で画面上に戻る、JavaScript...続きを読む
scrollBy - ページ内リンクをスムーズにスクロールする
ページ内リンクをJavaScriptでスムーズにスクロールするサンプルを紹介する...続きを読む
scrollTop scrollLeft - ブラウザのスクロール状態を取得する
JavaScriptのscrollTop scrollLeftでスクロール量を取...続きを読む
