人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

サイトのページ下によくある「TOP PEGE」ボタン。
このボタンを押すと滑らかにページのTOPに動かすやり方を知りたいです。誰か教えてください。

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

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

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


●質問者: avs
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:TOP サイト スピード ボタン ポイント
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● llusall
●100ポイント

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

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 ダミー

◎質問者からの返答

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


2 ● mkonomi
●100ポイント

<!?? 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

◎質問者からの返答

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


3 ● mkonomi
●0ポイント

<!?? 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

◎質問者からの返答

ダブっています・・


4 ● icchan0000
●130ポイント ベストアンサー

ボタンクリック時に、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関数を呼び出します。

◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ