【jQuery】ToTopボタンの実装方法~最初と最後は非表示~

悩んでいる人

ToTopボタンの実装の記事はよくあるけど、最初と最後だけ非表示にしたいのです。

本記事では、WEBサイトによくあるTOPに戻るボタンの実装方法について解説します。

僕も、JavascriptやjQueryには苦手意識があるのですが、これを読んでいる方も同じような方が多いのではないでしょうか?

今回、サンプルコードもまるごとコピペして使えるようにしておりますのでぜひこちらを参考に実装を試してもらえればうれしいです!

もっとこう書いたほうがいいよなどあればぜひアドバイスください!

ではいってみましょう!

スポンサーリンク

目次

実装コード

こちらで今回実装したトップに戻るボタンの動きを確認することができます。

See the Pen トップに戻るボタン by TakahiroOkada (@okalog) on CodePen.

とりあえず簡単にどのようなコードを書いているのか説明します。

とりあえずhtmlファイルにブラウザに表示される文字を書き込みます。

<a href="#" class="back-to-top">TOP</a>

次に、CSSでデザインを調整します。結構適当ですのでお好みに調整してください。

.back-to-top{
  display:none;
  position:fixed;
  right:10%;
  bottom:10%;
  color:#fff;
  padding:2rem;
  border-radius:50%;
  display:inline-block;
  text-decoration:none;
}
.back-to-top::before{
  content:'';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display:inline-block;
  width:70px;
  height:70px;
  background-color:#333;
  border-radius:50%;
  z-index:-1;
}

そして最後にjQueryです。

$(function() {
	// totop
	$(window).scroll(function() {
    // 100pxスクロールしていたらトップに戻るボタンを表示
    if($(this).scrollTop() > 100) { 
		  $(".back-to-top").fadeIn();
		} else {
		 $(".back-to-top").fadeOut();
		}

    // ページの一番下でトップに戻るボタンが消える
    const doch = $(document).innerHeight();
    const winh = $(window).innerHeight();
    const bottom = doch - winh;
    if (bottom <= $(window).scrollTop()) {
      $(".back-to-top").fadeOut();
    }
	});
  // トップに戻るボタンを押したらトップに戻る
	$(".back-to-top").click(function() {
    $("body,html").animate({scrollTop:0},800);
	});
});

まずは、ページの位置によってボタンが表示・非表示なるところのコードについて。

	$(window).scroll(function() {
    // 100pxスクロールしていたらトップに戻るボタンを表示
    if($(this).scrollTop() > 100) { 
		  $(".back-to-top").fadeIn();
		} else {
		 $(".back-to-top").fadeOut();
		}

    // ページの一番下でトップに戻るボタンが消える
    const doch = $(document).innerHeight();
    const winh = $(window).innerHeight();
    const bottom = doch - winh;
    if (bottom <= $(window).scrollTop()) {
      $(".back-to-top").fadeOut();
    }
	});

上のコードで100pxスクロールしたら、トップに戻るボタンを表示・非表示の制御をしています。

100の数字を調整すれば、どこでボタンを表示させるかを変えることができるのでためしてみてください。

そして、下のコードでページの一番下にきたときに、ボタンを非表示にする制御をしています。

$(document).innerHeight(); はページ全体の高さを取得して、constで定義します。

$(window).innerHeight();はスクリーンの高さを取得しています。取得した高さをconstで定義します。

そして、ページ全体の高さ – ウィンドウの高さ の差分をbottomと定義します。

あとは、if文でbottomの高さがスクロールした高さと同じか小さくなったときにトップに戻るボタンを非表示にする記述します。

この辺り僕も適当にやっていたのですが、検証画面でどんな値が取れるかをみると、理解が深まるかと思います。

  // トップに戻るボタンを押したらトップに戻る
	$(".back-to-top").click(function() {
    $("body,html").animate({scrollTop:0},800);
	});

ここではトップに戻るボタンを押したら、トップに戻る制御をしています。

第1引数にpropertiesで変化させたいCSSを書くみたいですね。CSS以外にもscrolltopscrollleftなどのカスタムプロパティもおけるようです。今回はそのパターンですね。

第2引数にはdurationがきており、どれだけの時間を変えて変化させるかを指定できます。

単位はミリ秒なので800ミリ秒 = 0.8秒 となります。

参考記事

まとめ

多くのWEBサイトにトップに戻るボタンがあるので、一度仕組みを理解しておくと応用が効くようになると思います。

そんな思いで、今回僕もコピペエンジニアから脱出するべく理解しようと頑張ってみました!

最初はコピペで実装していきながら、少しずつ理解していけるよに一緒に頑張っていきましょー。

スポンサーリンク

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

目次
閉じる