ページの先頭へスクロールして戻るには

質問

こんにちは。
HTMLでボディタグ直後に<a name=pagetop"></a>などとしておき、ページの下部において「ページの先頭へ」とか「ページトップ」とか「PAGETOP」とかというリンクを設け、そのリンクをクリックすればページの一番上に戻らせるというHTMLのみでできる方法がありますが、そうでなくて、これをスクロールさせながら戻らせるようにしたいんです。
例えば以下のホームページが実例としてあります。
「ページトップ」という文字をクリックすると上記のようになります。

http://www.yamaha.co.jp/siteusage/index.html

もちろん、このサイトのやり方と同じでなくても構いません。よりスマートなソース・やり方で出来ればそれが一番と思います。
JavaScriptは初心者でお恥ずかしいですが、これはぜひとも出来るようになりたいです。頑張ります。
どなたかどうぞ教えてください！
宜しくお願いいたします。

回答No.5

BlueRay

BlueRayです。
もう、ほぼ結果は出揃っているかもしれませんが

chuparkさんがNo3で回答されているソースをIEのみで動作するように最小限に抜粋した物が、No2で回答したソースです。

あとは、jsソースを参考にIE以外での現在位置を取得する分岐をつければ結局は同じようなものになります。
※これは、chuparkさんがNo4で説明されていますね。

chuparkさんがすでに説明済みなので当方の回答の補足をさせていただきました。

お礼

BlueRayさん、再度有難うございました。
「IE以外での現在位置を取得する分岐」というのが必要ということですね。
一つ前のchuparkさんの投稿に書かせて頂いたように、ここから先は自分でやってみようと思います。
色々と教えて頂き有難うございました。

回答No.4

chupark

何度も登場して恐縮ですが。

　＃１にものすごく単純に書かせていただいた
window.scrollTo()　は一応 e4/N4 以上で使用できるはずです。

　あとは、それをタイマーなりループなりで繰り返してスクロールしていくのだと思うのですが、あのサイトを見るとトップに近づくにつれてスピードが落ちるんですね？

　現在のスクロール位置などをスクリプト内で
　document.body.scrollLeft
　document.body.scrollTop
　などで取得してスクロールの到達地点までの相対位置に合わせた移動幅でスクロールをすればいいのかと思います。

　あのサイトのソースをそのまま使うのが忍びなければ要所要所を参考に組んでみてはいかがでしょう？

お礼

chuparkさん、返事遅くなり申し訳ないです。
その間色々と試してきたのですが、おっしゃるとおりIE4とNN4以上で動作するようにできました。
私の方でよくわかっていなくて動かないように思っていました。ごめんなさい。
あとのことですが、スクロールスピードがページトップに近づくほどに遅くなるという動きですが、これは初心者の私がこのサイトでご教授頂く方とやりとりして完成させようと思ったら、とても時間がかかり、またお手間過ぎると感じましたので、とりあえずここから先は自分で考えていこうと思います。
色々と有難うございました。

回答No.3

chupark

再挑戦です^^;

var Mac = navigator.appVersion.indexOf('Mac',0) != -1;
var Win = navigator.appVersion.indexOf('Win',0) != -1;
var IE = getBrouwserName() == 'Explorer';
var NN = getBrouwserName() == 'Netscape';
var Moz = navigator.userAgent.indexOf("Gecko") != -1;
var VER = parseInt(navigator.appVersion);
var ver = navigator.appVersion;
var Vmajor = parseInt(navigator.appVersion); // ex. 3
var Vminor = parseFloat(navigator.appVersion); // ex. 3.01
var MacIE5 = ((Mac && navigator.appVersion.indexOf('MSIE 5',0) != -1) || (Mac && IE && VER > 4));
var MacIE4 = ((Mac && navigator.appVersion.indexOf('MSIE 4.',0) != -1));
var MacIE3 = ((Mac && navigator.appVersion.indexOf('MSIE 3.',0) != -1));
var MIE4 = (Mac && IE && VER == 4);
var WinIE = (Win && IE);
var IE6 = (ver.indexOf("MSIE 6")>-1);
var IE55 = (ver.indexOf("MSIE 5.5")>-1);
var IE5 = (ver.indexOf("MSIE 5")>-1);
var IE56 = (IE6||IE55||IE5);

var NN40 = (NN && navigator.appVersion.indexOf('4.0',0) != -1);

var pageScrollTimer;

function pageScroll(toX,toY,frms,cuX,cuY) { // 020301
if (pageScrollTimer) clearTimeout(pageScrollTimer);
if (!toX || toX < 0) toX = 0;
if (!toY || toY < 0) toY = 0;
if (!cuX) cuX = 0 + getScrollLeft();
if (!cuY) cuY = 0 + getScrollTop();
if (!frms) frms = 6;

cuX += (toX - getScrollLeft()) / frms; if (cuX < 0) cuX = 0;
cuY += (toY - getScrollTop()) / frms; if (cuY < 0) cuY = 0;
var posX = Math.floor(cuX);
var posY = Math.floor(cuY);
window.scrollTo(posX, posY);
if (posX != toX || posY != toY) {
pageScrollTimer = setTimeout("pageScroll("+toX+","+toY+","+frms+","+cuX+","+cuY+")",16);
}
}

function jumpToPageTop() { // 020301
if (!MacIE3 && !MacIE4 && !NN && window.scrollTo || NN && (Vminor >= 4.75) && window.scrollTo) {
pageScroll(0,0,6);
} else {
location.hash = "top";
}
}

function getScrollLeft() { // 020225
if ((navigator.appName.indexOf("Microsoft Internet Explorer",0) != -1)) {
return document.body.scrollLeft;
} else if (window.pageXOffset) {
return window.pageXOffset;
} else {
return 0;
}
}

function getScrollTop() { // 020225
if ((navigator.appName.indexOf("Microsoft Internet Explorer",0) != -1)) {
return document.body.scrollTop;
} else if (window.pageYOffset) {
return window.pageYOffset;
} else {
return 0;
}
}

function getScrollWidth() { // 010317
if ((navigator.appName.indexOf("Microsoft Internet Explorer",0) != -1)) {
return document.body.scrollWidth;
} else if (window.innerWidth) {
return window.innerWidth;
}
return 0;
}

function getScrollHeight() { // 010317
if ((navigator.appName.indexOf("Microsoft Internet Explorer",0) != -1)) {
return document.body.scrollHeight;
} else if (window.innerHeight) {
return window.innerHeight;
}
return 0;
}

このサイトのやり方です。

お礼

chuparkさん、有難うございます。
はい、確かにYAMAHAのjsファイルを見るとこうなっていますが、これは制作会社がつくったものですからダメだと思っていましたが、これをこのまま使わずアレンジするとしても、そんなんで使っていいのですかね。
どう考えればいいのかなぁ・・・。

回答No.2

BlueRay

多分、ほぼ同じような動きだと思います。
以下のソースをコピペして、動作して見てください。

<SCRIPT Language="Javascript">
<!--
var pTmr;

function scrTop()
{
　　scrTop_sub(6,0,0);
}

function scrTop_sub(fmz,X1,Y1,X2,Y2)
{
　　var vLeft = document.body.scrollLeft;
　　var vTop =document.body.scrollTop;

　　if (pTmr) clearTimeout(pTmr);

　　if (!fmz) fmz = 6;
　　if (!X1 || X1 < 0) X1 = 0;
　　if (!Y1 || Y1 < 0) Y1 = 0;
　　if (!X2) X2 = 0 + vLeft;
　　if (!Y2) Y2 = 0 + vTop;

　　X2 += (X1 - vLeft) / fmz;
　　if (X2 < 0) X2 = 0;

　　Y2 += (Y1 - vTop) / fmz;
　　if (Y2 < 0) Y2 = 0;

　　var posX = Math.floor(X2);
　　var posY = Math.floor(Y2);

　　window.scrollTo(posX, posY);

　　if (posX != X1 || posY != Y1) {
　　　　pTmr = setTimeout("scrTop("+X1+","+Y1+","+fmz+","+X2+","+Y2+")",16);
　　}
}
-->
</SCRIPT>
<TABLE WIDTH="100%" HEIGHT="200%">
<TR><TD></TD></TR>
</TABLE>
<BR>
<DIV ALIGN="center"><A HREF="#top" onClick="scrTop();return false;">Goto TOP</A></DIV>

お礼

BlueRayさん、有難うございます！
早速試してみました！　が、私が伝えたいことを伝えきれていず、申し訳なかったのですが、WinのIE5以上、同ネスケ4.0以上、MacのIE4.5以上、同ネスケ4.7以上で動作するのが目標です。伝えていずに済みません。
このスクリプトだとWinのIE5.5ならOKでした。おそらく6以上でも大丈夫な気がします。が、たの動作条件ではどれも動きませんでした。せっかく教えてもらったのに済みません。

回答No.1

chupark

たとえばこういうのでどうでしょう？

function sc(){
var i;
for(i=500;i>0;i--){
window.scrollTo(0,i);
}
}

数値は適当です^^;

お礼

chuparkさん、有難う御座います。
でも、スクリプトがどう考えてもえらく少ないなと思いました。
実際試したのですが、やはり動作しませんでした。
せっかくお答え頂いたのに済みません。