「スムーズスクロール効果」の設定項目 - jQueryのチュートリアル

このレッスンでは jKit プラグインを 使ったスムーズスクロール効果を実装する為の― 設定項目について解説していきます まずはダウンロードしてきた smootnscroll-setting ― というフォルダーの中に入っている― こちらの index.html ファイルと そして この js フォルダーの中に入っている― こちらの javascript.js ファイルを エディターで開いて下さい そして これがそれらのファイルを 開いた状態です 左側には index.html ファイル そして 右側には― javascript.js ファイルを 表示させている状態です これらのファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずは前回までのレッスンのおさらいです 前回までのレッスンでこちらの メニュー部分の a タグに対して― こちらの javascript の部分で スムーズスクロールの実装を行ってきました 今回はそのスムーズスクロール効果に 設定項目を追加してその動きを― カスタマイズしたいと思います 今回 注目して頂きたい部分は こちらの部分となります それでは 順番に見ていきましょう まず 設定項目を追加する為には こちらの jKit の括弧の中の第二引数に― このように波括弧で囲って 複数の設定項目を追加していきます 今回は二つの設定項目を追加しています まずは offset というものと もう一つは speed というものです まず この offset の方から 説明します この offset というのは スムーズスクロールした際の移動先の位置を― カスタマイズすることが出来ます 今回は -120 と書いていますね これは -120 ピクセルという 意味になります このように書いておくことで 例えば こちらの Information の部分に― スムーズスクロールさせたい場合 このスムーズスクロールした先の― Information のコンテンツよりも -120 ピクセルの位置にスクロールさせる― といった意味になります そして 次にこちらの speed という 設定項目ですが この部分にはスムーズスクロールの スピードを設定することが出来ます 今回は 1000 と書いていますね これは 1000 ミリ秒のことで 一秒を指します このように記述しておくことによって スムーズスクロールする際― 一秒掛けて移動してくる といった意味になります それでは この状態で こちらの index.html ファイルを― ブラウザで開いてその動きを 確認してみたいと思います はい これがその index.html ファイルを ブラウザで開いた状態です では こちらのメニューを クリックしてみましょう 例えば　Photo Gallery です このようにクリックすると このようにぴったりと― Photo Gallery のタイトルが 表示されている状態でこの部分に― スムーズスクロールしてきましたね 前回までのレッスンでは 若干ずれて このような形で表示されていたかと思います 今回はその部分のオフセットを 修正したのでこのように綺麗に― スクロールしてくるようになりました そして そのスクロールのスピードも― このような形で一秒間掛けて― スクロールしてくるようになっています このように jKit プラグインを 利用すればスムーズスクロールの― 細かな設定を行うことも可能です 以上でレッスンは終了です 今回は jKit プラグインを使った スムーズスクロール効果を実装する為の― 設定項目について解説致しました 以降のレッスンからは jQuery を使って― スクロール位置に応じてヘッダーレイアウトを― 変更する方法について解説していきますので そちらも合わせてご覧下さい