jQueryでトップに戻るボタンを作りたい人「jQueryでトップに戻るボタンを簡単に実装する方法が知りたい。jQueryに関する知識がないけど、ホームページに簡単に取り入れる方法が知りたい。」
こういった方向けの記事です。3分ほどで読み終わります。
もくじ
- トップに戻るボタンをjQueryで実装する
- ボタンのちょっとしたアレンジ
僕はプログラミングやWeb制作で生活をしている現役コーダーです。
今回はjQueryの知識がなくても、簡単にスグ実装できる方法を紹介します。
トップに戻るボタンをjQueryで実装する
いきなりですが、よくWebサイトで見かける、下記のようなトップに戻るボタンの実装方法を紹介します。
結論は、下記をコピペするだけです。３分もあれば、実装できます。
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に対して、下記のように１行だけ追加します。
.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;
});
});これで、少しスクロールした後に、トップに戻るボタンが表示されるようになります。
コピペですぐに使えるので、ぜひお試しくださいませ！
