<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<style>
#page-top {
bottom: 0;
position: fixed;
right: 0;
}
#page-top a {
background-color: #1cb4d3;
color: #fff;
padding: 0.5rem 1rem;
}
/* レイアウトのためのcss */
body {
position: relative;
}
a {
display: block;
text-decoration: none;
}
.header {
background-color: #eee;
padding: 20px 0;
width: 100%;
}
.header ul {
display: flex;
justify-content: center;
}
.header li {
font-size: 15px;
list-style-type: none;
}
.header li:not(:first-of-type) {
margin-left: 1rem;
}
.header a {
color: #000;
}
section {
margin: 100px auto;
padding: 20px;
text-align: center;
width: 80%;
}
h2 {
font-size: 30px;
font-weight: 700;
line-height: 1.5;
}
p {
line-height: 1.5;
}
.works {
background-color: #bcffdd;
}
.gallery {
background-color: #bcbcff;
}
.service {
background-color: #ffbcbc;
}
.about {
background-color: #ffffbc;
}
.footer {
background-color: #000;
padding: 20px 0;
}
.footer p {
color: #fff;
font-size: 16px;
text-align: center;
}
.footer small {
color: #fff;
display: block;
text-align: center;
}
</style>
<main>
<header class="header">
<nav>
<ul>
<li><a href="#about">ABOUT</a></li>
<li><a href="#works">WORKS</a></li>
<li><a href="#gallery">GALLERY</a></li>
<li><a href="#service">SERVICE</a></li>
</ul>
</nav>
</header>
<section class="about">
<h2>ABOUT</h2>
<p>
ここにABOUTテキストが入ります。ここにABOUTテキストが入ります。ここにABOUTテキストが入ります。ここにABOUTテキストが入ります。ここにABOUTテキストが入ります。ここにABOUTテキストが入ります。ここにABOUTテキストが入ります。ここにABOUTテキストが入ります。ここにABOUTテキストが入ります。ここにABOUTテキストが入ります。
</p>
</section>
<section class="works">
<h2>WORKS</h2>
<p>
ここにWORKSテキストが入ります。ここにWORKSテキストが入ります。ここにWORKSテキストが入ります。ここにWORKSテキストが入ります。ここにWORKSテキストが入ります。ここにWORKSテキストが入ります。ここにWORKSテキストが入ります。ここにWORKSテキストが入ります。ここにWORKSテキストが入ります。ここにWORKSテキストが入ります。ここにWORKSテキストが入ります。
</p>
</section>
<section class="gallery">
<h2>GALLERY</h2>
<p>
ここにGALLERYテキストが入ります。ここにGALLERYテキストが入ります。ここにGALLERYテキストが入ります。ここにGALLERYテキストが入ります。ここにGALLERYテキストが入ります。ここにGALLERYテキストが入ります。ここにGALLERYテキストが入ります。ここにGALLERYテキストが入ります。ここにGALLERYテキストが入ります。ここにGALLERYテキストが入ります。
</p>
</section>
<section class="service">
<h2>SERVICE</h2>
<p>
ここにSERVICEテキストが入ります。ここにSERVICEテキストが入ります。ここにSERVICEテキストが入ります。ここにSERVICEテキストが入ります。ここにSERVICEテキストが入ります。ここにSERVICEテキストが入ります。ここにSERVICEテキストが入ります。ここにSERVICEテキストが入ります。ここにSERVICEテキストが入ります。ここにSERVICEテキストが入ります。
</p>
</section>
</main>
<footer class="footer">
<small>Copyright © 2022 じゅんぺいブログ</small>
</footer>
<div id="page-top">
<a href="#">PAGE TOP</a>
</div>
<script>
// ページトップボタン
$(function () {
const pageTop = $("#page-top");
pageTop.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
pageTop.fadeIn();
} else {
pageTop.fadeOut();
}
});
pageTop.click(function () {
$("body,html").animate(
{
scrollTop: 0,
},
500
);
return false;
});
});
// フッター手前でストップ
$(document).ready(function () {
$("#page-top").hide();
$(window).on("scroll", function () {
scrollHeight = $(document).height();
scrollPosition = $(window).height() + $(window).scrollTop();
footHeight = $("footer").innerHeight();
if (scrollHeight - scrollPosition <= footHeight) {
$("#page-top").css({
position: "absolute",
bottom: footHeight + 0,
});
} else {
$("#page-top").css({
position: "fixed",
bottom: "0",
});
}
});
});
</script>
</body>
</html>
