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

ページ内リンクをスムーズにスクロールするJavascriptで以下の条件を満たすものを探しています。

・商用利用可
・移動して止まる際に徐々に減速する(等速移動でない)
・リンク部分にonClickなどを入れないで、単なるページ内リンクの記述だけでいい
・JSのファイルサイズが極端に大きくない

jQueryを使っていても構いません。

●質問者: dingding
●カテゴリ:インターネット ウェブ制作
✍キーワード:JavaScript jQuery js サイズ スクロール
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● GEN111
●100ポイント ベストアンサー

探すのは面倒だったので作ってみましたが、どんなもんでしょう。

IE6、Firefox 2.0.0.6、Opera 9.22 で動作確認しました。


次のスクリプトを inpagelink.js と言う名前で保存

//
// inpagelink.js
//
// ページ内リンク移動
//

//
// 移動
//
function scroll_inpage_link(pos, tpos, spd, rdc) {
 pos += spd ;

 if ((rdc > 0 && pos >= tpos) || (rdc < 0 && pos <= tpos)) {
 document.documentElement.scrollTop = tpos ;
 }
 else {
 document.documentElement.scrollTop = pos ;
 setTimeout('scroll_inpage_link(' + pos + ',' + tpos + ',' + (spd-rdc) + ',' + rdc + ')', 10) ;
 }
}

//
// 移動指定
//
function move_inpage_link(target) {
 tid = target.hash.substr(1, target.hash.length-1) ;
 tobj = document.getElementById(tid) ;
 if (tobj.tagName == 'A') {
 ua = navigator.userAgent ;
 cheight = ua.indexOf('MSIE') >= 0 ? (
 ua.indexOf('MSIE 6') >= 0 ? document.documentElement.clientHeight : document.body.clientHeight
 ) : window.innerHeight ;
 tpos = document.documentElement.scrollHeight - cheight < tobj.offsetTop ? (document.documentElement.scrollHeight - cheight) : tobj.offsetTop ;

 cpos = document.documentElement.scrollTop ;
 rdc = (tpos - cpos) / 5050 ;
 spd = rdc * 100.0001 ;
 timerId = setTimeout('scroll_inpage_link(' + cpos + ',' + tpos + ',' + spd + ',' + rdc + ')', 10) ;
 }
}

//
// 初期化
//
function init_inpage_link() {
 anchors = document.getElementsByTagName('a') ;
 for (i = 0; i < anchors.length; ++i) {
 if (anchors[i].href && anchors[i].href == (document.URL+anchors[i].hash)) {
 anchors[i].onclick = function () {move_inpage_link(this) ; return false ; }
 }
 }
}

呼び出しはこんな感じ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
 <style type="text/css">
 div { margin-bottom : 70% ; }
 </style>

 <script src="inpagelink.js" type="text/javascript"></script>
 <script type="text/javascript">
 onload = function () {
 init_inpage_link() ;
 }
 </script>
 </head>

 <body>
 <div style="margin-bottom:150%;">
 <a id="A">A</a> <a href="#B">To B</a> <a href="#C">To C</a>
 </div>

 <div>
 <a id="B">B</a> <a href="#A">To A</a> <a href="#C">To C</a>
 </div>

 <div>
 <a id="C">C</a> <a href="#A">To A</a> <a href="#B">To B</a>
 </div>
 </body>
</html>

ちょっと減速感は少ないかも。

◎質問者からの返答

なんと!

すばらしい。

そんなにすぐ作れるなんて、すごいスキルですね。

動かしてみました。

マーベラス!

関連質問


●質問をもっと探す●



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