2008年07月01日

ページ Top に減速しながらスクロールして戻ります

スポンサード リンク

サンプルページの画面を下の方に移動して▲ページ 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);マイナスの値を指定すると 上に移動します。

posted by javaScript at 16:46 | 大阪 ☁ | スクロール | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。