サイトのページ下によくある「TOP PEGE」ボタン。

このボタンを押すと滑らかにページのTOPに動かすやり方を知りたいです。誰か教えてください。

参考サイト:
http://www.webcolor.jp/homepage/index.html 

このサイトのように一定のスピードではなく、最初よりか最後のスピードがちょっと遅くなる感じのものがいいです。

的確に解かりやすく教えていただいた方に100ポイント!!差し上げます!! 

回答の条件
  • URL必須
  • 1人3回まで
  • 登録:2006/05/29 20:58:21
  • 終了:2006/05/30 12:34:46

ベストアンサー

id:icchan0000 No.4

icchan0000回答回数85ベストアンサー獲得回数52006/05/29 21:27:13

ポイント130pt

ボタンクリック時に、javascriptを実行しています。

そのjavascriptでは、X座標が0になるまでx座標を減らしては上部へスクロール、を繰り返します。

http://www.fromdfj.net/javascript/windowscroll.html

に同じようなサンプルとソース、解説があります。


一応、例示されたサイトのソースと簡単な解説もつけてみます。

ソース:

function pageup() {

if (document.all) { posi = document.body.scrollTop; } ・・・(1)

else { posi = window.pageYOffset; }・・・(2)

moveObje(posi);・・・(3)

}

function moveObje(position) {

move = position / 10;・・・(4)

point = parseInt(position - move);・・・(5)

scrollTo(0,point);・・・(6)

if (point > 0) { setTimeout("moveObje(point)",1); }・・・(7)

}

(1)、(2)で変数posiに現在のX座標を設定

IE4.0以降(=document.allに対応している)の場合はdocument.body.scrollTop;を利用(1)、そうでない場合はwindow.pageYOffsetを利用(2)

(3)でmoveObje関数を実行



以下、moveObje関数になります。



(4)で変数moveに、上部にどれだけスクロールするか、という値を設定しています。

この場合は、現在座標の10分の1を設定しています。

こうすることによって、最後にスピードが遅くなる、という動きになります。ここが固定値だと、同じ動きでスクロール、になります。

(5)でスクロール後の座標位置を算出(現在位置から、(4)で求めた座標分だけ上にあがる)

(6)でスクロール(画面描画)実行

(7)で、座標位置が0(最上部)になるまで、moveObje(=自分自身)を繰り返すようにしています。

setTimeoutは、指定した時間(ミリ秒単位で指定)が経過後に、指定した処理を実行する関数です。

この場合は、setTimeoutに引数1を与えることにより、1000ミリ秒後に、現在のX座標でもってmoveObje関数を呼び出します。

id:avs

ありがとうございます!! できました!!

うれしいです!! 本当にありがとうございました!! また何かありましたら宜しくお願い致しますー!!

2006/05/30 12:17:53

その他の回答(3件)

id:llusall No.1

llusall回答回数505ベストアンサー獲得回数612006/05/29 21:18:20

ポイント100pt

以下、サンプルを記述します。

JavaScriptの関数は、ご希望のページより、取得しました。


<html>

<body>

・・・

・・・

・・・

・・・

<!-- page up -->

<div id="pgup">

<a href="javascript:;" onclick="pageup();return false;" onkeypress="pageup();return false;">

<img src="b_pgup.gif" width="157" height="41" alt="PAGE UP" onmouseover="this.src='b_pgup_ov.gif'" onmouseout="this.src='b_pgup.gif'" />

</a>

</div>

<!-- /page up -->

</body>

</html>


<SCRIPT LANGUAGE="JavaScript">

<!--

/* page up----------------------------------------------- */

function pageup() {

    if (document.all) { posi = document.body.scrollTop; }

    else { posi = window.pageYOffset; }

    moveObje(posi);

}

function moveObje(position) {

    move = position / 10;

    point = parseInt(position - move);

    scrollTo(0,point);

    if (point > 0) { setTimeout("moveObje(point)",1); }

}

//-->

</SCRIPT>

http://www.yahoo.co.jp ダミー

id:avs

私もちょっと前に試しましたが、IEのバージョン6ではうまくいきませんでした・・ ありがとうございます。

2006/05/30 10:54:36
id:mkonomi No.2

mkonomi回答回数651ベストアンサー獲得回数452006/05/29 21:25:16

ポイント100pt

<!-- page up -->

<div id=”pgup”>

<a href=”javascript:;” onclick=”pageup();return false;” onkeypress=”pageup();return false;”>

<img src=”○○○○” alt=”PAGE UP” ></a>

</div>

<!-- /page up -->



http://www.webcolor.jp/homepage/index.html 

id:avs

私もちょっと前に試しましたが、IEのバージョン6ではうまくいきませんでした・・ ありがとうございます。

2006/05/30 10:55:10
id:mkonomi No.3

mkonomi回答回数651ベストアンサー獲得回数452006/05/29 21:25:17

<!-- page up -->

<div id=”pgup”>

<a href=”javascript:;” onclick=”pageup();return false;” onkeypress=”pageup();return false;”>

<img src=”○○○○” alt=”PAGE UP” ></a>

</div>

<!-- /page up -->



http://www.webcolor.jp/homepage/index.html 

id:avs

ダブっています・・

2006/05/30 10:55:30
id:icchan0000 No.4

icchan0000回答回数85ベストアンサー獲得回数52006/05/29 21:27:13ここでベストアンサー

ポイント130pt

ボタンクリック時に、javascriptを実行しています。

そのjavascriptでは、X座標が0になるまでx座標を減らしては上部へスクロール、を繰り返します。

http://www.fromdfj.net/javascript/windowscroll.html

に同じようなサンプルとソース、解説があります。


一応、例示されたサイトのソースと簡単な解説もつけてみます。

ソース:

function pageup() {

if (document.all) { posi = document.body.scrollTop; } ・・・(1)

else { posi = window.pageYOffset; }・・・(2)

moveObje(posi);・・・(3)

}

function moveObje(position) {

move = position / 10;・・・(4)

point = parseInt(position - move);・・・(5)

scrollTo(0,point);・・・(6)

if (point > 0) { setTimeout("moveObje(point)",1); }・・・(7)

}

(1)、(2)で変数posiに現在のX座標を設定

IE4.0以降(=document.allに対応している)の場合はdocument.body.scrollTop;を利用(1)、そうでない場合はwindow.pageYOffsetを利用(2)

(3)でmoveObje関数を実行



以下、moveObje関数になります。



(4)で変数moveに、上部にどれだけスクロールするか、という値を設定しています。

この場合は、現在座標の10分の1を設定しています。

こうすることによって、最後にスピードが遅くなる、という動きになります。ここが固定値だと、同じ動きでスクロール、になります。

(5)でスクロール後の座標位置を算出(現在位置から、(4)で求めた座標分だけ上にあがる)

(6)でスクロール(画面描画)実行

(7)で、座標位置が0(最上部)になるまで、moveObje(=自分自身)を繰り返すようにしています。

setTimeoutは、指定した時間(ミリ秒単位で指定)が経過後に、指定した処理を実行する関数です。

この場合は、setTimeoutに引数1を与えることにより、1000ミリ秒後に、現在のX座標でもってmoveObje関数を呼び出します。

id:avs

ありがとうございます!! できました!!

うれしいです!! 本当にありがとうございました!! また何かありましたら宜しくお願い致しますー!!

2006/05/30 12:17:53

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません