参考サイト - Archiva v2.2 | A note of notions. On web, tech, and myth.
/*
scroll.js | v1
--------------------------------------------
Copyright 2007 Sig. - http://archiva.jp
Licensed under the Creative Commons Attribution 2.1 Japan License
- http://creativecommons.org/licenses/by/2.1/jp/
Functions:
--------------------------------------------
- smScrollTop
- smoothScroll
- getElementPos
- setScrollPosition
Function Calls:
--------------------------------------------
xxxxx.onclick = function(){
smScrollTop();
}
xxxxx.onclick = function(){
smoothScroll(this,'obj_id');
}
*/
/* ------------------------------------------ *
* smScrollTop()
* - no require
/* ------------------------------------------ */
function smScrollTop(){
var pos = new Object();
pos.x = document.documentElement.scrollLeft || document.body.scrollLeft;
pos.y = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollTo(Math.max(Math.floor(pos.x / 2),0), Math.max(Math.floor(pos.y -(pos.y / 5)),0));
if (pos.x > 0 || pos.y > 0) {
window.setTimeout("smScrollTop()", 10);
return false;
}
}
/* ------------------------------------------ *
* smoothScroll(base,move)
* - require start object and ID of goal object
/* ------------------------------------------ */
var timer;
var distance = 0;
function smoothScroll(base,move){
var base_pos = getElementPos(base);
var move_obj = document.getElementById(move);
var move_pos = getElementPos(move_obj);
distance = move_pos.y - base_pos.y;
var sdLength = 200; // 減速開始距離
var sdRatio = 6; // 減速率
var speed = 120; // 移動速度
timer = setInterval( function(){ setScrollPosition(sdLength,sdRatio,speed) },10);
}
function getElementPos(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;
}
function setScrollPosition(sdLength,sdRatio,speed) {
var moveValue = 0;
if(Math.abs(distance)>sdLength){
moveValue = (distance>0) ? speed : -speed;
}
else {
moveValue = Math.round(distance/sdRatio);
}
parent.scrollBy(0,moveValue);
distance = distance-moveValue;
if(moveValue==0){
clearInterval(timer);
distance=0;
}
}
<div id="container">ここがid="container"です</div>
:
ほにゃらら
:
<a href="#container" onclick="smScrollTop(); return false;" title="ページの先頭へ">ページの先頭へ</a>