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

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

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

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

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

●質問者: dingding
●カテゴリ:インターネット ウェブ制作
✍キーワード:イメージ スクロール リンク 日本語 英語
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● nabetomo
●35ポイント

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のみで同じスクロール処理が可能です。

◎質問者からの返答

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


2 ● cacao72
●35ポイント

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

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

◎質問者からの返答

ありがとうござます。

関連質問


●質問をもっと探す●



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