コース: WebデザイナーのためのjQuery 実践講座

今すぐコースを受講しましょう

今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。

jQuery&jKitで「スムーズスクロール効果」を実装する

jQuery&jKitで「スムーズスクロール効果」を実装する - jQueryのチュートリアル

コース: WebデザイナーのためのjQuery 実践講座

jQuery&jKitで「スムーズスクロール効果」を実装する

このレッスンでは jQuery と jKit プラグインを使って― 実際にスムーズスクロール効果を実装する方法 について解説していきます まずは ダウンロードしてきたこちらの smoothscroll-js ― というフォルダーの中に入っている― こちらの index.html ファイルと そして こちらの js フォルダーの中に― 入っているこの javascript.js ファイルを― エディターで開いて下さい そして これがそれらのファイルを 開いた状態です 左側には index.html ファイル― そして 右側には javascript.js ファイルを― 表示させている状態となっています これらのファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう それでは まず 前回までのレッスンの おさらいをしておきたいと思います 前回までのレッスンでこちらの index.html ファイルの― こちらのメニュー部分の― A タグに対してそれぞれリンク先となる ページ内の箇所を指定しました 今回はこの html タグに対して スムーズスクロール効果をー 付けていってみたいと思います それでは こちらの javascript.js ファイルの方に― 目を移して こちらの部分にご注目下さい こちらの部分で実際にそのスムーズスクロール 効果を実装しています それでは まず始めに こちらの部分から見ていきましょう こちらの部分で実際に スムーズスクロール機能を有効化しています まずは $(this) と書いていますね こちらの this というのは こちらの部分となります この $ から始まって find A で 終わっている部分ですが― これはこちらのヘッダータグの中の ナビゲーションタグの中にある― a タグという意味になります その a タグ に対して jKit― これは jKit プラグイン特有の命令ですね そして その jKit の後にある 括弧の中に scroll ― という値を与えてあげることで jKit の中のスムーズスクロール機能を― 利用するといった意味になります それでは 次に こちらの上の部分を見ていきます こちらの部分ですね 先程も言ったとおり こちらの部分に関しては…

目次