【jQuery】ページトップへ戻る機能を実装してみる。
JavaScriptはカリキュラムで習いましたが、jQueryは触りだけでしたので
自分なりに勉強したことを備忘録として残しておくことにしました。
今回、jQueryを使って目指す実装はこの様な物です。
目次
1.事前準備
1-1.HTMLとCSSの記述
先ずはページトップボタンを作成します。
HTMLは下記をファイルの一番下に記述しました。
<div id="pagetop">
<a>ページトップ</a>
</div>
divタグで囲んでid名はまんま「pagetop」としてみました。
お次にCSS
#pagetop{
position: fixed;
right: 50px;
bottom: 50px;
cursor:pointer;
color: #fff;
background-color: #ccc;
font-size: 14px;
width: auto;
padding: 0 30px;
line-height: 50px;
letter-spacing: 1px;
border: none;
text-decoration: none;
}
ポイントとしては
- 「position: fixed;」スクロールしても位置が固定された状態する。
- 「right: 50px;」画面右端から50px分左にずらして配置。
- 「bottom: 50px;」画面下端から50px分上にずらして配置。
- 「cursor: pointer;」画像の上にマウスを乗せた時に、マウスカーソルが指マークに変わるようにする。
あとは、ボタンっぽく見える様にごちゃごちゃ記述を増やしました。
ちなみに、「right: ;」や「bottom: ;」の数値はマイナスの指定もできる様です。
今回は文字にしましたが、画像を使った実装の時に効果を発揮しそうです。
1-2.WebpackerでjQueryを管理
お次はjQueryを導入です。
ターミナルで「yarn add jquery」コマンドを実行します。
「jquery-rails」というGemを利用することもできるそうなのですが、
まだ勉強していませんので、こちらは後ほど勉強したら追記します。
1-3.設定ファイルの書き換え
config/webpack/environmet.js へ下記の様に記述を追加します。
1-4.jQueryを呼び出し
app/javascript/packs/application.jsへ下記の様に記述を追加します。
// that code so it'll be compiled.
require("turbolinks").start()
require("channels")
//下記一行を追加
// Uncomment to copy all static images under ../images to the output folder and reference
1-5.pagetop.jsファイルを作成・参照ができる様にする。
app/javascriptディレクトリに、pagetop.jsファイルを作成します。
とりあえず記述は後回しにして、pagetop.jsファイルが参照できる様に
app/javascript/packs/application.jsに再度下記の様に記述を追加します。
// that code so it'll be compiled.
require("turbolinks").start()
require("channels")
//下記一行を追加
require('../pagetop')
// Uncomment to copy all static images under ../images to the output folder and reference
これで準備完了！
2.ページトップへ移動の設定。
ページトップに戻るようにpagetop.jsファイルにJavaScriptを書いていくのですが、
その前に、jQueryの基本の書き方を勉強しましたので
こちらもおさらいとして残しておくことにします。
※jQueryの基本の書き方
jQueryには、記述の型があり以下のようになります。
先ず、「$(document).ready」の部分です、
「$(ダラー)」って実は「jQuery」の省略された書き方なのだそうです。
「jQuery(document).ready」と書いても同じとのこと。
つまりこれは、jQueryを呼び出す記述になります。
「これからjQuery書きますよ」意味ですね。
「document」は、HTMLの読み込みのことです。
「ready」はそのまま「準備」って意味です。
「function」の中身の記述されたものが処理されていきます。
つまり、上記は「HTMLの読み込みが準備できたら処理しまっせ」って意味になります。
そして、さらに略して書くことが一般的な様で以下のように書きます
2-1.クリックイベントの設定
いよいよ本題ですね。
「クリックされたら、ページトップにスクロールして移動するよ」
っていう命令を書いていきます。
$(function(){
$('#pagetop').on('click',(function () {
//id名#pagetopがクリックされたら、実行される処理を記述
}));
});
「$(function(){ ～ });」の中に、書いてきます。
「$(‘#pagetop’).on('click'( ～ ));」は、
「id名#pagetopがクリックされたら実行」っていう意味で、
id名#pagetopがクリックされたら、処理を実行します。
2-2. ページトップへ移動の設定
$(function(){
$('#pagetop').on('click',(function () {
//id名#pagetopがクリックされたら、以下の処理を実行
$("html,body").animate({scrollTop:0},"200");
}));
});
2行目の「$(‘#page’).on('click'( ～ ));」の中身を説明しますと、
先ず、「$(“html,body”)」はページ全体を選択しています。
htmlとbodyを同時に選択していますが、
複数でセレクタを選択する時はカンマ「,」で区切ります。
htmlとbodyを同時に選択する訳は、
WEBブラウザによっては、bodyに効くけどhtmlだと効かない、
逆にhtmlに効くけどbodyだと効かないみたいなことがあるらしいです。
WebKit系ブラウザでは、bodyに効き、
それ以外のブラウザではhtmlに効きくのだそうです(受け売り)。
4行目の「animate」は、
指定したセレクタの属性を個別にアニメーションすることできます。
アニメーションを調べてみたところ、
選択したセレクタの位置や幅を変えたり、その変化のスピードを変えたりと
汎用性の高いことが色々できちゃうそうです。
今回の場合だと、
animate({属性:属性の変化の値},”速度設定”)って感じですね。
属性の「scrollTop」は、
ウィンドウの一番上からのスクロール位置を指定することができます。
ページトップに移動させたいので、ウィンドウの一番上に指定してます。
つまり「0(ゼロ)」ですね。
速度設定は、’slow’、’normal’、’fast’、の文字列や、
ミリ秒単位の数値を入れることができます。
いろいろいじってみた結果、今回は200に設定してみました。
3.スクロール途中にボタンを出現させる。
ページトップにいるのにページトップボタンがあるのは
個人的にモヤっとするので、 スクロール途中で出てくる様な実装を行っていきます。
記述内容は下記の通りです。
$(function(){
$('#pagetop').hide();
$(window).on('scroll',(function () {
if($(window).scrollTop() > 0) {
$('#pagetop').slideDown(200);
} else {
$('#pagetop').slideUp(200);
}
}));
});
2行目の「hide()」は、非表示にする命令で、これを使って最初はボタンを非表示にします。
3行目の「$(window).scroll( ~ );」は、ウィンドウがスクロールされたら処理という意味です。
※if文の記述説明
次のifですが、下記の記述にあるように(条件)に合致すると、処理1が実行され
合致しなかったら処理2が実行されます。
if(条件){
処理1
}else{
処理2
}
rubyとの一番の違いは「end」で絞めないところでしょうか。
「scrollTop()」でスクロールの位置の値を取得しています。
ここのif文は、スクロールの位置が上から0以上の時は処理1が実行されて、
それ以外の時は処理2が実行されるってことになります。
- 処理1である「slideDown」は、隠れているボタンを縦方向にスライドしながら表示させていきます。
- 処理2である「slideUp」は、slideDownとは逆に画像を縦方向にスライドしながら非表示させていきます。
カッコの中の数値を変更することで表示、非表示のスピードを設定することができます。
遅くすると、ヌル〜って出てきてそれはそれで面白いですよ〜。
4.マウスオーバー時の設定
最後に画像の上にマウスが乗ったとき、つまりマウスオーバーした時の、
変化を作っていきたいと思います。以下のコードを書き足します。
$(function(){
$('#pagetop').on("mouseover", function () {
}).on("mouseout", function () {
});
});
- 「mouseover」マウスのポインタが乗った時の処理
- 「mouseout」マウスのポインタが外れた時の処理
をそれぞれ記述していきます。
上記だとマウスのポインタが乗った時はボタンの色がグレーになり、
マウスが外れている時は元の色に戻るという感じにしています。
5.まとめたコード
以下、今までのをまとめたコードです。
$(function(){
//ページトップへのスクロール
$('#pagetop').on('click',(function () {
//id名#pagetopがクリックされたら、以下の処理を実行
$("html,body").animate({scrollTop:0},"200");
}));
$('#pagetop').hide();
//ページトップの出現
$(window).on('scroll',(function () {
if($(window).scrollTop() > 0) {
$('#pagetop').slideDown(200);
} else {
$('#pagetop').slideUp(200);
}
}));
//マウスオーバー時の色変化
$('#pagetop').on("mouseover", function () {
}).on("mouseout", function () {
});
});
6.感想とおまけ
お疲れ様でした〜。
CSSやJavaScript(jQuery)ってRubyと違って、
微調整が難しいけどそれが楽しくて時間かけちゃいますね。
おまけは
マウスオーバー実装中に動作確認していた時のものです。
下記はそのコードですね。
$(function(){
//ページトップへのスクロール
$('#pagetop').on('click',(function () {
//id名#pagetopがクリックされたら、以下の処理を実行
$("html,body").animate({scrollTop:0},"200");
}));
$('#pagetop').hide();
//ページトップの出現
$(window).on('scroll',(function () {
if($(window).scrollTop() > 0) {
$('#pagetop').slideDown(200);
} else {
$('#pagetop').slideUp(200);
}
}));
//マウスオーバー時に避ける
$("#pagetop").on('mouseover',(function(){
}));
$("#pagetop").on('mouseout',(function(){
}));
});
どうなるかというと・・・。
フィっと避けやがります
個人的にツボに入っちゃったので乗っけておきました。
