サンプルページの画面を下の方に移動して▲ページ Top に戻る を押してください。
スルスルっとスクロールアップしてページ最上部に戻ってきます。小気味好いですよ。
今のブログで満足ですか？
FC2レンタルサーバーLiteでホームページを作る！
サンプルソース
<html>
<head>
<title>ページ Top に減速しながらスクロールして戻ります。</title>
<script language="JavaScript">
<!--
function Scr_updown() {
var Doc=document;
//横スクロール位置取得,このスクリプトでは使いません
//var Scr_x=Doc.body.scrollLeft || Doc.documentElement.scrollLeft || Doc.scrollX
|| 0;
//縦スクロール位置取得
var Scr_y=Doc.body.scrollTop || Doc.documentElement.scrollTop || Doc.scrollY || 0;
Scr_y= Math.ceil(Scr_y*0.1);//Math.ceil()は値を切り上げ（7.24なら8）となります。
scrollBy(0,-Scr_y);//スクロール位置を、現在位置から指定距離だけ移動します。
// 画面最上部に移動するまで繰り返す
if(Scr_y>0){// 変数 Scr_y が 0 になったら停止します。
var Tout=setTimeout("Scr_updown()", 20);
}else{
clearTimeout(Tout);
}
}
// -->
</script>
</head>
<body>
<a name="top" id="top"></a>
<p>
画面を下の方に移動して
<SPAN style="color : blue;">▲ページ Top に戻る</SPAN>
を押してください。<BR>
スルスルっとスクロールアップして
ページ最上部に戻ってきます。エレベーターみたい！！</p>
<div style="margin-top : 800px;">
<a href="#top" onclick="Scr_updown();return false;">▲ページ
Top </a>
</div>
<div style="margin-top : 800px;">
<a href="#top" onclick="Scr_updown();return false;">▲ページ
Top </a>
</div>
<div style="margin-top : 1024px;">
<a href="#top" onclick="Scr_updown();return false;">▲ページ
Top </a>
</div>
</body>
</html>
Scr_y= Math.ceil(Scr_y*0.1); scrollBy(0,-Scr_y);// これが大きなポイントですが
ここで説明すると長くなります。Scr_y= Math.ceil(Scr_y*0.1);の後ろにalert(Scr_y);を挿入してください。
Scr_y= Math.ceil(Scr_y*0.1);alert(Scr_y);にします。
これでソースを実行すると変数 Scr_y の数値の変化がよく分かります。
始めは早く、後半は遅く減数していきます。これによって減速しながらスクロールしていくわけです。
scrollBy(0,-Scr_y);マイナスの値を指定すると 上に移動します。
