6行目で、これまでの処理の結果を利用して、実際にスムーズスクロールを実行している。7行目は、おまじないに近いが、<a>要素をクリックしたときにブラウザが本来行う処理を無効にしている。URLは変わらないし、「戻る」で元の位置に戻ったりせず、前のページに戻るようになる。次に、6行目では何をしているのかを確認しよう。これを設定した要素(上のコードでは<body>と<html>)の属性値を時間変化させることができる。<body>と<html>の両方なのかというと、たぶんブラウザの種類によって設定すべき要素が違うんだと思う。第1引数では、アニメーションさせたいプロパティとその値を、object形式で指定する。第2引数では、アニメーションの所要時間をミリ秒で指定する。第3引数では、イージングといって、アニメーションの時間変化の加速度を指定する。(徐々に加速し、徐々に減速)という2種類の文字列値だけだ。アレンジ移動先の表示位置を調整するページ内リンクは、標準の方法でも今回の方法でも、リンク先の要素が画面の上端に来るように移動する。このサイトをPCで閲覧すると、画面上端にメインメニューが固定表示されるので、リンク先がメニューにかぶってしまわないように位置を調整している。いうことで、4行目を以下のように変えよう。50;-50することで、通常より50ピクセル上がスクロールの目的地になる。移動距離によって所要時間を変えるページ内リンクと一口に言っても、移動距離は長かったり短かったりする。上記のソースでは、どんな距離を移動しても所要時間が一定なので、移動速度が距離に比例することになる。移動距離が短い時は遅すぎるかもしれないし、長い時は速すぎるかもしれない。そこで、速度を一定にするというのも一つの手だ。5行目を以下のように変えてみる。現在のページ上端からの位置だ。ここでどんな計算をしているのかというと、「時間=距離÷速度」ということで、「現在の位置」-「目的地の位置」の絶対値が移動距離だから、これを速度「2」で割って所要時間を求めているのだ。ちなみに「2」とは、2ピクセル/ミリ秒、つまり2000ピクセル/秒ということだ。この速度を各自調整してくれたらいいんだけど......実際にやってみればわかるが、上の例では移動距離が200ピクセルしかないとたった0.1秒で移動してしまい、ほぼ瞬間移動だ。逆に、移動距離が10000ピクセルもあれば、移動に5秒もかかってしまい、かなり鬱陶しい。いずれも極端な例だが、俺はけっこう気になったので、移動距離に応じて速度を変えるようにif文をたくさん書いた。結局、速度を一定にするより、所要時間を一定にしたほうがナチュラルかもしれない......終わりに今回はjQueryを使ってページ内リンクをスムーズスクロールにする方法を紹介した。俺が独学でWEBデザインを学び、このサイトを作って培った技術やノウハウを、多くの人と共有したい。それで、こうやってこのサイトで実際に使っているコードを紹介している、つまりこのサイトの作り方を公開しているわけだ。「れーとーびーむの作り方」シリーズで紹介したこと、これから紹介することを全部真似していけば、このサイトと同じようなサイトが完成する。コピペするだけじゃなくて、応用し、アレンジし、自分だけのサイトを作ってほしいと思っているわけだけど。俺としては自信を持っているこの立派でかっこいい(?)サイトも、こうやって簡単に作れるんだよと、そういう思いを込めて「れーとーびーむの作り方」と名付けた次第だ。一応創作クラスタだから、タイトルはそれなりに考えてるんだよーっと。あ、配置や配色や画像のデザインは苦手だから、見た目はかっこよくないよ。WEBデザインは技術だし、見た目のデザインはセンスだからなー。デザインのセンスが欲しい。ついでに絵もうまくなりたい。今回はこの辺にしとこう。それでは、次回をお楽しみに。(2015/09/30)こめんとコメントはまだありません。こめんとする本文のみ必須。メールアドレスは公開されないよ。お名前メアド名前とメアドを記憶する数式の空欄を正しく埋めてね。※本文には日本語を“数文字”以上含めてね。(詳細)コメントを投稿すると、メールアドレスを含む投稿内容と、投稿者を識別するIPアドレスなどが当サイトのサーバーに送信され、保持される。これらの情報は当サイトのサービスの提供やコンテンツの改善のために利用される。あなたは、当サイトによるこれらの情報の取り扱い(取得・処理・利用)に同意しなければ、コメントを投稿することはできない。この同意の要件は法的な要件として追加されたもので、当サイトによるこれらの情報の取り扱いは従来から変わっていない。当サイトの個人情報の取り扱いについて詳しくは、プライバシー・ポリシーを読んでね。(871)※過去30日間の閲覧数データによる。