Webサイトの一番上にいる場合は「トップに戻るボタン」が隠れている状態ですが、下にスクロールすると、下から出てくるように設定。
コピーペーストで簡単実装できるようにコードを記述しています。
<head>内にjQueryのライブラリを追加
jQueryをCDN経由で読み込むためにhead内に下記のコードを貼り付けます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<footer>内にトップに戻るボタン追加
footerの直下にid名page_topのコードを記述。
HTML
<footer>
<p id="page_top"><a href="#">TOP</a></p>
</footer>
CSS
/*------------------------------------
topに戻るボタン
------------------------------------*/
#page_top {
position: fixed;
transform: translateY(100px);
}
#page_top a {
display: flex;
justify-content: center;
align-items: center;
background: #3b5d82;
border-radius: 50%;
color: #fff;
text-decoration: none;
transition: all 0.3s;
}
#page_top.upmove {
animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#page_top.downmove {
animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 1;
transform: translateY(100px);
}
}
/* @media (min-width: 1000px) {} 1000px以上で適用 */
@media (min-width: 1000px) {
/* ボタン配置 */
#page_top {
right: 24px;
bottom: 0;
}
#page_top a {
width: 80px;
height: 80px;
}
}
/* @media (max-width: 999px) {} 999px以下で適用 */
@media (max-width: 999px) {
#page_top {
right: 12px;
bottom: 0;
}
#page_top a {
width: 50px;
height: 50px;
font-size: 0.6rem;
}
}
JS
//topに戻るボタン
function topanime() {
var scroll = $(window).scrollTop();
//300pxスクロールしたらpage_topが出てくる
if (scroll >= 300) {
$("#page_top").removeClass("downmove"); //初期クラス名
$("#page_top").addClass("upmove"); //クラス名追加
} else {
if ($("#page_top").hasClass("upmove")) { //classが存在するかを確認
$("#page_top").removeClass("upmove"); //pagetopの場合はクラス名削除
$("#page_top").addClass("downmove"); //pagetopの場合はクラス名追加
}
}
}
$(window).scroll(function () {
topanime();
});
$(window).on("load", function () {
topanime();
});
$("#page_top a").click(function () {
$("body,html").animate(
{
scrollTop: 0,
},
500 //スクロールスピード
);
return false;
});
CodePen
See the Pen トップに戻るボタン by pull-design (@design90806871) on CodePen.