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.
↓下記本は実践編としてさらに踏み込んだ知識が身につくお勧めの本です。
▪動くWebデザイン アイディア帳 実践編
好評の「動くWebデザイン アイディア帳」の姉妹本で「サイトを印象付ける基本の動き」+「世界観を作る動き」を集めた現場で使える実践サンプル集!「サイトの印象を決定付ける動き」をこの1冊が丸ごとカバーしています。
