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

スムーススクロール ページトップ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryの文法のおさらいに、ページトップへスムーズに戻る演出を実装してみましょう。
講師:
08:22

字幕

このレッスンではスムーズスクロールについて学んでいきましょう。それではまずfinal のファイルを開いてどのような動きなのかを確認しておきましょう。final のフォルダーを開いたらindex.html があるのでこちらを Google Chrome で開きます。開いたら少しページをスクロールしていきましょう。ある程度スクロールすると、右側にこういった気球に矢印のアイコンが出てくるようになっていますそして上にやるとまた消えます。そしてある程度このようにスクロールをしてそしてこちらをクリックしてみましょう。このように、するすると上に上がっていくようなスクロールになっています。そして上に上がるとこのアイコンが消えるという風になっていますね。縦に長いサイトではよく使われる手法でユーザーにスクロールの負担を課したくない時にこのページトップのスクロールを設けてあげるといいと思います。それではフォルダーに戻りまして、begin のフォルダーをフォルダーごとSublime Text にドラッグアンドドロップをしてファイルを開きましょう。そうしたらまず index.html をダブルクリックで開いておきます。 そしてこのレッスンではJavaScript を外部の JavaScript として保存したいと思うのでJavaScript を新規作成します。File メニューから New FileMac では Command+NWindows では Ctrl+N で新規ファイルでしたね。それではこの New File をクリックしてみましょう。そしてこちらをもういきなり保存してしまいます。File から Saveもしくは Mac で Command+SWindows で Ctrl+S でオッケーです。それでは Save をクリックします。そして名前の方をcommon.js とします。common はサイト全体で使用するといった目的があるので今回はこのような名前にしました。そして保存するフォルダーですがbegin フォルダーの中のjs フォルダー を選びましょう。js フォルダーの中に入ってここで Save を押しますと、これで common.js が作成されました。それでは JavaScript を記述していきましょう。まず実行タイミングをDOM が読み込まれた。つまりブラウザーで HTML の要素等が読み込まれたタイミングで実行させたいのでfunction そして括弧そして1回右に矢印をクリックして波括弧そしてこのように Enter 押して行末にはセミコロンを打っておきましょう。 この中に実行させたいスクリプト群を入れていきたいと思います。それではまず変数を宣言しておきましょう。トップに戻るボタンという名前を付けた入れ物の中に$(そしてクラス pagetop という物を入れておきます。これはページトップに戻るアイコンの画像についているクラス名です。これを記述しやすいようにこのように変数の中に入れておきます。そして最初にこのトップボタンはjQuery のメソッドhide で隠しておきます。そして $(window)そして .scroll というメソッドでfunction そして括弧そして波括弧を隣に打って Enterそしてここで if 文をを書いておきます。if は括弧の中身に条件が入りますね。$( そして thisこれが .scrollTop とT が大文字です。scrollTop( これが700 より上だったらという条件の時にトップボタンがフェードインする。そしてこの括弧の隣でelse と入力してその他の条件だったらトップボタンがフェードアウト。つまり気球のあのアイコンが出たり消えたりするのはこのスクロールの1番上からの距離で条件判定ができると。700 よりも上からスクロールしたら現れるようになっているんですね。 そしてそれ以外では消えるようになっていると。そしてこの条件式が終わったらトップボタンのクリックの function を書いていきましょう。click そして functionそして括弧を打って隣に波括弧。波括弧の中身にクリックしたらどうなるという記述をしていきます。$(そしてセレクターは body と htmlカンマで区切ると、セレクターのグループが作れます。そしてするする上るのはanimate というメソッドで実装が可能です。まず括弧を打ってから波括弧を打ちます。そして波括弧の中で Enter を押してscrollTopそして : 0これが1番上までということになってそしてこの括弧と波括弧の間にカンマを入れてここにスピードを入れることができます。700 というのはミリセカンドなので0.7 秒で上に上がってくださいという命令です。そしてこのセミコロンの後ろでreturn false と打っておきます。そして行末に ; を打ってそして一度上書き保存をしておきましょう。Mac は Command+SWindows は Ctrl+S で保存をして、そして html にフォーカスをしてこの今書いた common.js を読み込む設定をしましょう。 閉じの body の上でインデントの Tab を押してscriptそして閉じの script を書いたら開始の script の括弧の内側でソース属性 src と書いてここにはファイル名とファイルの場所を入れますがjs フォルダーの中の common.jsということなのでこのように入力をして上書き保存をしてアプリケーションをGoogle Chrome に切り替えて更新をしましょう。そしてスクロールをして行くと、このようにアイコンが出たり消えたりする、これは if 文で判定をしています。そしてクリックすると、するすると戻るのはanimate のメソッドで実装しています。このように様々なメソッドを組み合わせることでこのような動きが実装できると。そして今まで打ち込んだこのスクリプトはどんなサイトでも基本的にはこのクラス名だけが可変になると思います。なのでスニペットとして使ってみてください。このレッスンではスムーズスクロール、ページトップに戻るの作り方を学びました。

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

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

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

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

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

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