のせっち 
こんにちは！のせっち@nosecchi01です。
ページ右下に追従して、押すとふわーっとトップへ戻るボタンの実装方法です。
初心者の方向けに、
- コピペで簡単に実装できる
- 詳しい解説付き
となっています。
それではいってみましょう！
jQueryを使わず、javascriptのみで書いたものもあります！こちらも合わせてどうぞ！
動きを確認できるサンプル
さっそくcodepenで見てみましょう！
See the Pen pagetop (jQuery) by Yuki Nose (@yukinouz1) on CodePen.
- スクロールでページ右下にボタンが出現
- ボタンを押すと、ふわーっとページトップへ戻る
jQuery部分の解説
HTML, CSSは基本的な事しか書いていないので、jQuery部分を解説していきます。
まずは全体像を見てみましょう！
const pageTop = $('#js-pagetop');
const scroll = 100;
$(window).on('scroll', () => {
if ($(this).scrollTop() > scroll) {
pageTop.fadeIn();
} else {
pageTop.fadeOut();
}
});
// クリックでトップへ戻る
const speed = 500;
pageTop.on('click', () => {
$('body, html').animate({
scrollTop: 0
}, speed);
return false;
});大まかな流れは下記です。
- 100スクロール以上でfadeIn、それ以外はfadeOut
#js-pagetopボタンを押すとトップへ戻る。
細かく解説
さて、ここからめちゃくちゃ細かく解説していきます。
初心者向けですので、適宜飛ばし読みしていただいてOKです。
まずは前半です。
const pageTop = $('#js-pagetop');
const scroll = 100;
$(window).on('scroll', () => {
if ($(this).scrollTop() > scroll) {
pageTop.fadeIn();
} else {
pageTop.fadeOut();
}
});更に細かく分解します。
const pageTop = $('#js-pagetop');id="js-pagetop"を変数pageTopに代入しました。
const scroll = 100;どのくらいスクロールしたときにボタンを出す（消す）をしたいか、スクロール量を定義しておきます。
ここは任意の数字に変えてOKです。
$(window).on('scroll', () =>{
// 省略
}); スクロールしたら、以下の処理をしてね、となります。
アロー関数で書いているので、下記のように書いてもOKです。
$(window).on('scroll', function() {
// 省略
}); $(window).on('scroll', () => {
if ($(this).scrollTop() > scroll) {
// 省略
}
});ここでの$(this)はwindowを指します。
scrollTop()はスクロール量を取得できるメソッドです。
『スクロール量が、scroll以上だったら、以下の処理をしてね、ということになります。』
scrollはさきほど、const scroll = 100と定義していましたね。
あとは、条件に合うときは、fadeIn()そうでなければfadeOut()します。
続いて、後半をみていきます。
const pageTop = $('#js-pagetop'); // 解説用
const speed = 500;
pageTop.on('click', () => {
$('body, html').animate({
scrollTop: 0
}, speed);
return false;
});更に細かく分解します。
const speed = 500;スクロールするスピードを定義しました。
const pageTop = $('#js-pagetop'); // 解説用
pageTop.on('click', () => {
// 省略
});pageTopボタンをクリックしたら、以下の処理をしてね、となります。
こちらも先ほどと同様、アロー関数です。
pageTop.on('click', () => {
$('body, html').animate({
scrollTop: 0
}, speed);
return false;
});animateメソッドを使って、scrollTop: 0へ、つまりページ最上部へ。speedはさきほど定義したconst speed = 500です。
解説は以上です！
jQueryのオススメ書籍
僕が実際に読んだものでよかったのは下記2点です。
jQuery標準デザイン講座
基本文法はもちろんですが、定番のパーツを用いて解説してくれる点が神です。
結局jQueryでやりたいことは、Webサイトでの動きの実装ですよね。その点にフォーカスしてくれているのでとても使い勝手が良いです。
コーディングが５倍速くなる！jQueryセレクター超入門 Kindle版
jQueryのセレクタのみに特化した漢気あふれる本です。
セレクタを知らないと、「あれ？なんで動かない？」とか、「どうやってこのセレクタを狙えばいいの？」といった疑問出てきてしまいます。
この本でセレクタの事は全てわかるので辞書的に置いておきたい一冊です。
kindle Unlimitedで読めるところも推しポイントですね！
kindle Unlimitedは月額980円で対象の電子書籍が読み放題になるサービスです。
技術系教材は基本的に高いので、1〜2ヶ月に1冊程度読むくらいでも十分ペイできますよ。
Javascriptのみで実装する方法
冒頭でも紹介しましたが、
jQueryを使わずにJavascriptのみで実装する方法も解説しています！