jQuery APIでWebサイトを演出しよう

スムーススクロール コンテンツ

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ページ内リンクをスムースリンクで実装してみましょう。
講師:
10:07

字幕

このレッスンではスムーズスクロールのコンテンツへのスクロールを学んでいきます。それでは動きを確認してみましょう。まず final のフォルダーの中に入っている index.html をGoogle Chrome で開きましょう。開いたら、少しスクロールをしてあげるとここに矢印のアイコンがあります。マウスを重ねてクリックしてみましょう。クリックするとこのようにコンテンツエリアまでするするとスムーズにスクロールをします。ページトップの方もスムーズスクロールですし、こちらの矢印アイコンもスムーズにスクロールします。それではこちらを作っていきましょう。まずフォルダーに切り替えてbegin のフォルダーを丸ごとSublime Text に落とします。落としたら index.html をダブルクリックで開いて1番下までスクロールをしましょう。このファイルでは JavaScript を1番下、閉じ body の上に書いていきたいと思います。このスクリプトはトップページへしか使えませんのでトップページに直接埋め込むということをしていきたいと思います。それではスクリプトを書くためにまずスクリプトタグを作りましょう。 そして開始タグを作ったら終了タグもいるので/script という風にして閉じておきましょう。そうしたらまず $(そしてセレクターを作ります。a そして属性のセレクターを作りましょう。この四角い括弧を使って大括弧ですね。こちらを作って href*=そしてダブルクォーテーションです。" を2つ作って間に # を入れておきましょう。そしてこの大括弧が閉じます。括弧が少し複雑ですがまずシングルクォーテーションはjQuery セレクター全体を包んでいてこの大括弧は属性セレクター、つまり href でhyperreference の属性を持っている aという風にセレクターを特定して、これをクリックしたらという function を作っていきます。function 入力したら括弧の中に名前 e という関数にしておいて下さい。そしてここに波括弧を打って Enterここにクリックの中身の内容を書いていきます。行末には一応セミコロンを打っておきましょう。そしてここで if 文を入れていきます。if の括弧の中に条件を指定します。そして !$(this)そしてその後に .hasClasshasClass の C 大文字です。 そして括弧、そしてシングルクォーテーションでセレクターを書きますがno-scroll という風に入れておきます。これの意味はこの ! は何々以外ですね。何々以外という条件式になります。つまり no-scroll というクラス属性がhasClass 持っているthis 以外ということでno-scroll が付いている物には効きませんよという風な書き方になります。そして波括弧を打って、こちらに実際の処理を記述していきましょう。この名前の付いた e という関数ですのでe.preventDefault という風に入力すると、この a 本来のリンクをクリックしたらどこかに飛ぶというのを一度オフにするという機能ですね。preventDefault をしてそして変数を幾つか宣言していきましょう。まず f を作ってthis.href ということで飛び先を変数に格納してそしてもう1個 p というのを作ったら上の変数の split分割で括弧、そして '#'そして ; を打っておいてそしてもう1個また宣言をt と作って、その中身にはp の中の大括弧配列ですね。1番目、とそして今度は変数をもう1個to 作って、その中には $('#'+t)ハッシュをプラス t という風にしておきます。 そして .offset();そしてもう1個変数を作りましょう。tt = to.topこれでよくページ内リンクを作るときはa の属性値に # とその飛び先の id 名を付けますつまりこのハッシュはid と読み替えてもらって大丈夫です。id のところで分割をしてid 名をくっつけてそこの距離を算出するというようなものをこちらで行っています。そしてそちらをクリックしたらどうなるのかというと、$ セレクターを作ってhtml,body と入力をしてそして結局はスクロールするのはanimate を使います。animate メソッドを使って括弧を作ったら、その中に波括弧を作って Enterそして scrollTop:そしてこのままだと上に行ってしまうのでtt というのがその分割した場所になります。こちらを打っておきましょう。tt と打ちましたら今度はスピードを調整しましょう。この波括弧とこの括弧のすき間にカンマを入れて、1000そしてカンマを入れてイージングの文字列swing という風に入れておきます。これで行末にセミコロンを入れて一度保存をして右クリックからOpen in Browser で開いていきましょう。 このように begin のファイルが開いたら、スクロールをしてみましょう。押したときに、ここに確かに飛んでいるのですがスムーズにはスクロールしていません。ここでデバッグの方法を見ていきましょう。適度なところで右クリックでコンテキストメニューを出し、「要素の検証」を押してみましょう。「要素の検証」を押すと、このように右上に赤いマークが2つ出ています。これはエラーが2つありますという情報なのでここをクリックします。そうするとコンソール内に2つエラーが出ています。黄色いワーニングのマークについてはとりあえず無視しても大丈夫です。まず1つ目、Failed to load resourceこれは ajax のGoogle API からjQuery が読み込めません、というエラーなんですがこれはローカルでは読み込めないという書き方をしていてそのためにダウンロードしてきたJavaScript を読ませるようにしているのでこのエラーについては無視して大丈夫です。問題は2つ目の Unexpected と書いてあるようにこれが不正ですという風に言っています。これは152行目にありますという風に親切に案内がありますのでこれをチェックしてみましょう。 では Sublime Text に戻ります。戻って、152行目を見てみましょう。そうすると、セレクターの前は必ず$ でないといけないのに& という風に書いてあります。これを $ に打ち変えてあげましょう。そして上書き保存をしてブラウザーで開き、そしてデベロッパーツールは右上のバツマークで閉じてそして更新をしましょう。そしてもう一度この矢印をクリックしてみると、このようにスムーズにスクロールされました。しかしここで止まって欲しいのですが、ここまで来てしまいます。これは最後の仕上げをして上げたいと思います。Sublime Text に戻って、tt の後ろに-50 と入力してあげましょう。そして上書き保存をしてGoogle Chrome を開きそして一度更新をしてから矢印を押してみましょう。そうすると 50 ピクセルの距離がここあるのでその分オフセット、上に戻すということをしました。これを使ってページ内自由自在にスムーズスクロールを使いこなしてみてください。このレッスンではコンテンツでのスムーズスクロールの作り方について学びました。

jQuery APIでWebサイトを演出しよう

jQueryはJavaScriptを効率良く記述することができる、世界中で広く使われているライブラリです。APIとは外部のウェブサービスを自分のサイト内で利用できる仕組みのことです。このコースではjQueryやAPIの基本を学習したのち、jQueryのプラグインやGoogle APIなどの実践的な使い方について学びます。

2時間43分 (22 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年05月29日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。