ページ内リンクをススーッと移動するリンクの作り方を教えて下さい。


http://www.vaio.sony.co.jp/
このページの下にある「ページトップ」を押したときの動きのイメージです。

また、これをiframeで横スクロールでも使えればと思います。

英語のページの場合、リンクだけでなく、日本語の解説があるページも教えてください。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/04/03 12:58:27
  • 終了:2007/04/03 19:30:13

回答(2件)

id:nabetomo No.1

nabetomo回答回数125ベストアンサー獲得回数62007/04/03 17:10:45

ポイント35pt

window.jsに実際の処理内容が記載されていますね。

当該処理で使用している部分のみ抜粋すると・・・

//=========================================================

/* Private Functions */

//Document Scroll

var _v_scrollToY;//

var _v_scrollLastY;

var _v_scrollTimer;

//スクロール処理

function _v_ScrollDo() {

var d = _v_scrollLastY - _v_scrollToY;

var done = false;

if( Math.abs(d)<1 ) {

done = true;

_v_scrollLastY = _v_scrollToY;

} else if( _v_GetScrollPosY() != Math.floor(_v_scrollLastY) ) done = true;

else _v_scrollLastY -= d / 6;

self.scrollTo( 0, Math.floor(_v_scrollLastY) );

if( done ) {

clearInterval( _v_scrollTimer );

_v_scrollTimer = null;

}

}


//「PAGETOPへ」の呼び出し関数

function vScrollToTop() {

vScrollTo(0);

}

//スクロール前準備処理

function vScrollTo( y ) {

var w = window;

var d = document.documentElement;

var b = document.body;

var mac = _Mac && _Ie;

//ブラウザ内の縦幅を取得

var windowH = (w.innerHeight) ? w.innerHeight : (!mac) ? d.offsetHeight : b.scrollHeight;

//クライアントのOSを判断し、現在の縦スクロールの位置の取得を変更

var pageH = (!mac) ? b.scrollHeight : d.offsetHeight;

var maxY = (pageH > windowH) ? pageH - windowH : 0;

//タイマーの初期化

if( _v_scrollTimer ) clearInterval( _v_scrollTimer );

_v_scrollToY = y < maxY ? y : maxY;

_v_scrollLastY = _v_GetScrollPosY();

//15ミリ秒のタイマーセット(15ミリ秒毎に_v_ScrollDo()処理が呼び出される)

_v_scrollTimer = setInterval( '_v_ScrollDo();', 15 );

}


※clearInterval関数の使い方

http://www.scollabo.com/banban/jsindex/sample/sample_034.html

※setInterval関数の使い方

http://www.scollabo.com/banban/jsindex/sample/sample_248.html

※上記scriptのみで同じスクロール処理が可能です。

id:dingding

具体的なスクリプトまで書いていただき、ありがとうございます。

2007/04/03 17:19:23
id:cacao72 No.2

cacao72回答回数3ベストアンサー獲得回数02007/04/03 18:10:00

ポイント35pt

私はここを参考にしました。

http://www.simplexsimple.com/archives/2006/09/post.html

id:dingding

ありがとうござます。

2007/04/03 19:27:44

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

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

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

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

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