フッターで止まる上に戻るナビゲーション実装例

## 実装方法
[上に戻るナビの固定](https://junpei-sugiyama.com/page-top-stop/)
[jQueryについて](https://www.jquerystudy.info/reference/core/jQuery3.html)

```html
<!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>
```