// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // // 【ゆっくりリンクスクロール】 http://www.cman.jp/ // // 商用,改変,再配布はすべて自由ですですが、動作保証はありません // // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // maintenance history // // Ver Date contents // 1.0 2015/7/15 New // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // // 使用方法 // // 1.この下の【ユーザ設定】を確認&設定してください // // 2.htmlのスクロースリンク対象(クリック対象)に以下の設定をしてください // // 「 onClick="cmanLinkScroll('移動先ID') 」 // // (例) <img src="neko.jpg" border="0" onclick="cmanLinkScroll('inu');"> // この場合、"neko.gif"画像をクリックしたら、 // 同一ページ内の「 id="inu" 」までスクロールする // // 詳細は以下でご確認ください // https://web-designer.cman.jp/javascript_ref/window/linkscroll/ // // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ var cmanLinkScrollCns = {}; // ┏━【ユーザ設定】━━━━━━━━━━━━━━━━ // ┃ // ┃ 以下の[a]~[b]の設定をしてください // ┃ // ┃┌─────────────────────── // ┃│ [a] 1回に移動する幅 // ┃│ 範囲 : 1 ~10 ( 1:細い ~ 10:粗い ) // ┃│ 制約 : 10は移動表示しない cmanLinkScrollCns["moveWidth"] = 3; // ┃└─────────────────────── // ┃┌─────────────────────── // ┃│ [b] 移動する時間間隔 // ┃│ 範囲 : 1 ~99 ( 1:早い ~ 99:遅い ) cmanLinkScrollCns["moveTime"] = 20; // ┃└─────────────────────── // ┗━━━━━━━━━━━━━━━━━━━━━━━━ // ━━━ 初期設定 ━━━━━━━━━━━━━━━━━━━━━━━━━━ cmanLinkScrollCns["movePar1"] = '0.009,0.027,0.055,0.091,0.136,0.191,0.255,0.327,0.409,0.5,0.591,0.673,0.745,0.809,0.864,0.909,0.945,0.973,0.991,1'; cmanLinkScrollCns["movePar2"] = '0.011,0.033,0.067,0.111,0.167,0.233,0.311,0.4,0.5,0.6,0.689,0.767,0.833,0.889,0.933,0.967,0.989,1'; cmanLinkScrollCns["movePar3"] = '0.014,0.042,0.083,0.139,0.208,0.292,0.389,0.5,0.611,0.708,0.792,0.861,0.917,0.958,0.986,1'; cmanLinkScrollCns["movePar4"] = '0.018,0.054,0.107,0.179,0.268,0.375,0.5,0.625,0.732,0.821,0.893,0.946,0.982,1'; cmanLinkScrollCns["movePar5"] = '0.024,0.071,0.143,0.238,0.357,0.5,0.643,0.762,0.857,0.929,0.976,1'; cmanLinkScrollCns["movePar6"] = '0.033,0.1,0.2,0.333,0.5,0.667,0.8,0.9,0.967,1'; cmanLinkScrollCns["movePar7"] = '0.05,0.15,0.3,0.5,0.7,0.85,0.95,1'; cmanLinkScrollCns["movePar8"] = '0.083,0.25,0.5,0.75,0.917,1'; cmanLinkScrollCns["movePar9"] = '0.167,0.5,0.833,1'; cmanLinkScrollCns["movePar10"] = '1'; var cmanLinkScrollWk = {}; //cmanLinkScrollWk["moveIdx"] 移動テーブルIDX //cmanLinkScrollWk["startX"] 移動開始の横位置 //cmanLinkScrollWk["startY"] 移動開始の縦位置 //cmanLinkScrollWk["endY"] 移動終了の縦位置 //cmanLinkScrollWk["nowY"] 移動中の縦位置 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // ゆっくりスクロール // // 引数: スクロール先のID // // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function cmanLinkScroll(argID){ // 現在の位置取得 cmanLinkScrollWk["startX"] = document.body.scrollLeft || document.documentElement.scrollLeft; cmanLinkScrollWk["startY"] = document.body.scrollTop || document.documentElement.scrollTop; // 指定要素の位置(縦のみ) cmanLinkScrollWk["endY"] = Math.floor(document.getElementById(argID).getBoundingClientRect().top); cmanLinkScrollWk["endY"] += cmanLinkScrollWk["startY"]; // スクロール開始 cmanLinkScrollWk["moveIdx"] = 0; cmanLinkScrollWk["nowY"] = cmanLinkScrollWk["startY"]; cmanLinkScrollLoop(); } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // スクロール実行 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function cmanLinkScrollLoop(){ // タイマー初期化 if (cmanLinkScrollWk["timer"]) {clearTimeout(cmanLinkScrollWk["timer"]);} // 移動のパーセント取得 var wParTbl = cmanLinkScrollCns["movePar" + cmanLinkScrollCns["moveWidth"]].split(","); var wPar = wParTbl[cmanLinkScrollWk["moveIdx"]]; cmanLinkScrollWk["moveIdx"]++; // 次の位置計算 cmanLinkScrollWk["nowY"] = Math.floor((cmanLinkScrollWk["endY"] - cmanLinkScrollWk["startY"]) * wPar + cmanLinkScrollWk["startY"]); // 終了判定 & 移動 if(cmanLinkScrollWk["moveIdx"] > wParTbl.length){ clearTimeout(cmanLinkScrollWk["timer"]); // タイマクリア } else { // 移動実行 window.scrollTo(cmanLinkScrollWk["startX"],cmanLinkScrollWk["nowY"]); // 移動実行 cmanLinkScrollWk["timer"] = setTimeout("cmanLinkScrollLoop()",cmanLinkScrollCns["moveTime"]); // 次のループ } }