jQueryでカレンダーを作っているのですが・・・

質問

現在ホームページを作成していて、
年月が変わったら、自動で位置がスクロールするカレンダーを作りたいと思っています。

そこで、jQueryを使おうと思い、下記のURLを参考に入れようと思ったのですが、
http://qa.itmedia.co.jp/qa2937941.html
ここに書いてあるのは、

function next() {window.scrollBy(0,500);}
function last() {window.scrollBy(0,-500);}
window.onload = function(){
var today = new Date();
window.scrollTo(0,today.getMonth()*0);
}

というjQueryで、
自動で月のみを取得してスクロールするjQueryでした。
年も反映するにはどう修正したらいいのかがわかりません。

ちなみに、カレンダーは下記のURLで、
http://www.creator-web.co.jp/rigaku/calendar.html
iframeで該当カレンダー部分だけ表示するようにいしています。
http://www.creator-web.co.jp/rigaku/index.html
アドバイスお願いします！

回答No.1

LancerVII · ベストアンサー

こんにちは。

まずさらっと見て何点かHTMLを見直したほうが良い部分があります。

aタグのnameはidに変える、それに従い数字のみはだめ。
aタグの中にdivタグはだめ
spanタグの中にdivタグはだめ

本題ですが、以下のようにすればお望みどおりの動きになると思います。
(実際動かして無いので間違えていたらスミマセン)

ぐちゃぐちゃかいてますが、年が進むにつれて、1年分のピクセル数を加算すればよいのです。
その計算がA)式になります。
手計算すれば分かりますが
2014/2014の余りは0
2015/2014の余りは1
2016/2014の余りは2
・・・・
となります。

表示を開始している年月に対して上記の値*12ヶ月分のピクセルを足せば、一年分先に進むことになります。

window.onload = function(){
// 何年からのカレンダーを表示しているか
var startYear = 2014;
// 何月からのカレンダーを表示しているのか
var startMonth = 2;
// 上下のピクセル数
var step = 500;
// 当日を取得
var today = new Date();
// 年を取得
var year = today.getFullYear();
// 月を取得
var month = today.getMonth();
// 表示位置を算出
// A)取得した年を表示開始年で割った余りに12ヵ月分のピクセル数をかける
// B)取得した月を表示開始月からいくつ分かを計算する
//
// すなわち実行日が今日の場合(2014年2月)
// A)2014割る2014の余りは0 0*12*500 = 0
// B)(1-2+1) * 500 = 0 ← monthは0～11の値が入る
// A + B = 0になり表示位置は0

// よって、実行日が2015年2月の場合は
// A)2015割る2014の余りは1 1*12*500 = 6000
// B)(1-2+1) * 500 = 0 ← monthは0～11の値が入る
// A + B = 6000になり表示位置は6000
var y = ( year % startYear * 12 * step ) + (month-startMonth+1)*step;
window.scrollTo(0,y);
}