みったに

トップに戻るボタンをjQueryを使って3分で実装する方法【初心者でも簡単】

PROGRAMMING

jQueryでトップに戻るボタンを作りたい人

jQueryでトップに戻るボタンを作りたい人「jQueryでトップに戻るボタンを簡単に実装する方法が知りたい。jQueryに関する知識がないけど、ホームページに簡単に取り入れる方法が知りたい。」

こういった方向けの記事です。3分ほどで読み終わります。

もくじ

  • トップに戻るボタンをjQueryで実装する
  • ボタンのちょっとしたアレンジ

僕はプログラミングやWeb制作で生活をしている現役コーダーです。
今回はjQueryの知識がなくても、簡単にスグ実装できる方法を紹介します。

トップに戻るボタンをjQueryで実装する

トップに戻るボタンをjQueryで実装する
いきなりですが、よくWebサイトで見かける、下記のようなトップに戻るボタンの実装方法を紹介します。

結論は、下記をコピペするだけです。3分もあれば、実装できます。

HTMLのコード

ボタンを置きたい場所に下記のコードを書きます。

<div class="pagetop"><a href="#header"></a></div>

CSSのコード

ボタンのスタイルは、例えば、下記の感じです。なお、動画のボタンは下記のスタイルを適用しています。

.pagetop {
  width: 90px;
  height: 90px;
  position: fixed;
  bottom: 50px;
  right: 15px;
  background-color: #333;
  border-radius: 50%;
}
.pagetop a {
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  transition: 0.3s;
  border-radius: 50%;
}
.pagetop a:hover {
  opacity: 0.5;
  border-radius: 50%;
}
.pagetop a::before {
  font-weight: 600;
  content: "▲";
  font-size: 25px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

jQueryのコード

今回はjQueryを使うので、HTMLファイルの</body>の直前、もしくは、<head></head>の間に下記のコードを書いておきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

そして、JSファイルに下記をコピペします。

// トップに戻るボタン
$(document).ready(function () {
  var pagetop = $(".pagetop");
  pagetop.click(function () {
    $("body, html").animate({ scrollTop: 0 }, 500);
    return false;
  });
});

HTMLファイルで、JSファイルを読み込むのを忘れないように注意です!

例えば、HTMLファイルの</body>の直前、もしくは、<head></head>の間に下記のコードを書いておきます。

<script src="style.js"></script>

これで、トップに戻るボタンの実装が完了です!

反映されない場合

HTMLファイルとCSSファイルとJSファイルが、全て同じディレクトリにあることを確認してみてください。

トップに戻るボタンをちょっとアレンジしてみる

トップに戻るボタンをちょっとアレンジしてみる
ちょっとだけ、ボタンをカスタマイズしてみます。

例えば、トップではボタンは表示されずに、少しスクロールしてからボタンが表示されるようにしたい場合は、下記の感じで実装します。

CSSのコード

先ほどのCSSのコードにある.pagetopに対して、下記のように1行だけ追加します。

.pagetop {
  display: none; /* ここを追加 */
  width: 90px;
  height: 90px;
  position: fixed;
  bottom: 50px;
  right: 15px;
  background-color: #333;
  border-radius: 50%;
}

jQueryのコード

先ほどのCSSのコードは最初にボタンが表示されないようにするための設定です。

そして、今から、スクロールした後に、ボタンが表示されるようにするための設定をjQueryで書きます。

// トップに戻るボタン
$(document).ready(function () {
  var pagetop = $(".pagetop");
  // ここから追加部分
  $(window).scroll(function () {
    if ($(this).scrollTop() > 300) {
      pagetop.fadeIn();
    } else {
      pagetop.fadeOut();
    }
  });
  // ここまで追加部分
  pagetop.click(function () {
    $("body, html").animate({ scrollTop: 0 }, 500);
    return false;
  });
});

これで、少しスクロールした後に、トップに戻るボタンが表示されるようになります。

コピペですぐに使えるので、ぜひお試しくださいませ!

【プログラミングスクール】ココを選んでおけば失敗しない格安3校を厳選
「プログラミングスクールに通いたいけど、学費も高いし、挫折して失敗したくない。プログラミングスキルを身につけて、エンジニアとしてお仕事ができるようになりたい。」 こういった悩みをお持ちではないでしょうか? そこで今回は、......