このボタンを押すと滑らかにページのTOPに動かすやり方を知りたいです。誰か教えてください。
参考サイト：
http://www.webcolor.jp/homepage/index.html
このサイトのように一定のスピードではなく、最初よりか最後のスピードがちょっと遅くなる感じのものがいいです。
的確に解かりやすく教えていただいた方に１００ポイント！！差し上げます！！
No.4
85
5
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に、上部にどれだけスクロールするか、という値を設定しています。
この場合は、現在座標の１０分の１を設定しています。
こうすることによって、最後にスピードが遅くなる、という動きになります。ここが固定値だと、同じ動きでスクロール、になります。
(5)でスクロール後の座標位置を算出（現在位置から、(4)で求めた座標分だけ上にあがる）
(6)でスクロール（画面描画）実行
(7)で、座標位置が０（最上部）になるまで、moveObje（=自分自身）を繰り返すようにしています。
setTimeoutは、指定した時間（ミリ秒単位で指定）が経過後に、指定した処理を実行する関数です。
この場合は、setTimeoutに引数１を与えることにより、1000ミリ秒後に、現在のX座標でもってmoveObje関数を呼び出します。
No.1
50561
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>
私もちょっと前に試しましたが、IEのバージョン６ではうまくいきませんでした・・ ありがとうございます。
No.2
65145
100pt
＜！－－ ｐａｇｅ ｕｐ －－＞
＜ｄｉｖ ｉｄ＝”ｐｇｕｐ”＞
＜ａ ｈｒｅｆ＝”ｊａｖａｓｃｒｉｐｔ：；” ｏｎｃｌｉｃｋ＝”ｐａｇｅｕｐ（）；ｒｅｔｕｒｎ ｆａｌｓｅ；” ｏｎｋｅｙｐｒｅｓｓ＝”ｐａｇｅｕｐ（）；ｒｅｔｕｒｎ ｆａｌｓｅ；”＞
＜ｉｍｇ ｓｒｃ＝”○○○○” ａｌｔ＝”ＰＡＧＥ ＵＰ” ＞＜／ａ＞
＜／ｄｉｖ＞
＜！－－ ／ｐａｇｅ ｕｐ －－＞
私もちょっと前に試しましたが、IEのバージョン６ではうまくいきませんでした・・ ありがとうございます。
No.3
65145
＜！－－ ｐａｇｅ ｕｐ －－＞
＜ｄｉｖ ｉｄ＝”ｐｇｕｐ”＞
＜ａ ｈｒｅｆ＝”ｊａｖａｓｃｒｉｐｔ：；” ｏｎｃｌｉｃｋ＝”ｐａｇｅｕｐ（）；ｒｅｔｕｒｎ ｆａｌｓｅ；” ｏｎｋｅｙｐｒｅｓｓ＝”ｐａｇｅｕｐ（）；ｒｅｔｕｒｎ ｆａｌｓｅ；”＞
＜ｉｍｇ ｓｒｃ＝”○○○○” ａｌｔ＝”ＰＡＧＥ ＵＰ” ＞＜／ａ＞
＜／ｄｉｖ＞
＜！－－ ／ｐａｇｅ ｕｐ －－＞
ダブっています・・
No.4
855
ここでベストアンサー
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に、上部にどれだけスクロールするか、という値を設定しています。
この場合は、現在座標の１０分の１を設定しています。
こうすることによって、最後にスピードが遅くなる、という動きになります。ここが固定値だと、同じ動きでスクロール、になります。
(5)でスクロール後の座標位置を算出（現在位置から、(4)で求めた座標分だけ上にあがる）
(6)でスクロール（画面描画）実行
(7)で、座標位置が０（最上部）になるまで、moveObje（=自分自身）を繰り返すようにしています。
setTimeoutは、指定した時間（ミリ秒単位で指定）が経過後に、指定した処理を実行する関数です。
この場合は、setTimeoutに引数１を与えることにより、1000ミリ秒後に、現在のX座標でもってmoveObje関数を呼び出します。
ありがとうございます！！ できました！！
うれしいです！！ 本当にありがとうございました！！ また何かありましたら宜しくお願い致しますー！！
7
7
1
1
ありがとうございます！！ できました！！
うれしいです！！ 本当にありがとうございました！！ また何かありましたら宜しくお願い致しますー！！