＜ 前の記事
jQuery - hover()
jQuery - 先頭に戻るためのボタンの表示
公開日：2018-12-28
更新日：2019-05-14
更新日：2019-05-14
1. 概要
スクロールした際に、先頭(トップ)に戻るための、ボタンを右下に表示します。
ボタンを右下に表示するには、css を以下のようにします。
スクロールした際のボタンの表示は、スクロールイベントで現在のスクロールしている位置を取得して、
その位置によって、要素の表示を切り替えます。
ボタンを右下に表示するには、css を以下のようにします。
position:fixed; right:20px; bottom:20px;
スクロールした際のボタンの表示は、スクロールイベントで現在のスクロールしている位置を取得して、
その位置によって、要素の表示を切り替えます。
$(window).on("scroll", function(e) {
if ($(this).scrollTop() > 50) {
要素を表示する;
} else {
要素を隠す;
}
});
2.1 サンプル
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<style>
#link {
position:fixed; right:20px; bottom:20px;
width:40px; height:40px; background-color:yellow;
display:none;
}
</style>
<div style="height:1000px; border:5px red solid;"></div>
<div id="link"></div>
<script>
$(window).on("scroll", function(e) {
if ($(this).scrollTop() > 50) {
$("#link").css("display", "block");
} else {
$("#link").css("display", "none");
}
});
$("#link").on("click", function(e) {
$(window).scrollTop(0);
});
</script>
</body></html>
右側の赤線があるエリアのスクロールバーを移動すると、ログ出力されます。
実行結果：画面
2.2 サンプル アニメーション付き
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<style>
#link {
position:fixed; right:20px; bottom:20px;
width:40px; height:40px; background-color:yellow;
display:none;
}
</style>
<div style="height:1000px; border:5px red solid;"></div>
<div id="link"></div>
<script>
$(window).on("scroll", function(e) {
if ($(this).scrollTop() > 50) {
$("#link").fadeIn();
} else {
$("#link").fadeOut();
}
});
$("#link").on("click", function(e) {
$('body, html').animate({
scrollTop:0
}, 500);
});
</script>
</body></html>
右側の赤線があるエリアのスクロールバーを移動すると、ログ出力されます。
実行結果：画面
＜ 前の記事
jQuery - hover()
