＼一狩り行こうぜ！／
どうも、久しぶりにThe Hunter: Call of the WildでマタギをやっているDJよろずやです。
動物の痕跡を探すだけで1時間以上はかかるゲームなので、忍耐との勝負です。
Steam：theHunter: Call of the Wild™
リアルかつ美しいオープンワールドで、他にはない趣ある狩りゲームを体験しましょう。ゲームはコミュニティと連携して定期的にアップデート。シングルプレイヤーキャンペーンにのめり込んでも、究極の狩り体験を友達と共有しても、お楽しみ頂けます。
store.steampowered.com
閑話休題
今回も引き続きJavascript(jQuery)シリーズです。
今までの記事はこちらから。
月刊JAVASCRIPT Vol.3
今回は
ボタンを押下すると、画面最上部にスクロールする「Pagetopボタン」
に関して説明していきます。
動きはこう。
Pagetopボタン
$(function () {
// 変数pagetopにid[js-pageTop]を代入
var pagetop = $('#js-pageTop');
// 変数pagetopを非表示にする
pagetop.hide();
// ウィンドウをスクロールしたとき
$(window).on("scroll", function() {
// もし、ウィンドウのスクロール値が100pxより大きい時
if ($(this).scrollTop() > 100) {
// pagetopをフェードインで表示する
pagetop.fadeIn();
// それ以外なら(ウィンドウのスクロール値が100px以内なら)
} else {
// pagetopをフェードアウトする
pagetop.fadeOut();
}
});
// pagetopをクリックしたとき
pagetop.click(function () {
// スクロール値0の位置まで、500ミリ秒のスピードでアニメーションをする
$('body, html').animate({ scrollTop: 0 }, 500);
// 処理を中断。リンク先に飛ばされる可能性を防ぐために記述。
return false;
});
});めっちゃくちゃシンプルです。
結構使うことの多い、
$(window).on(“scroll”, function() {}
→画面をスクロールしたら
$(xxx) .click(function () {}
→xxxをクリックしたら
は絶対に覚えておいたほうが良いことなので、何回でも反復して書いてみましょう。
おわりに
次回でついに最終回！
ラストの内容は画像のPC/SP切り替えです。
乞うご期待！！
私も新しい記事ネタ探す旅に出ますぞ～～～～～
それではまた👋
