【JavaScript・jQuery両方で解説】TOPへ戻るボタン

Topへ戻るボタンの実装

「TOPへ戻るボタン」と言いますと、Webサイトに訪れて文章を読んでいき下の方まで読み進んでいった場合に
一気に上の方まで戻りたいときってありますよね。

ここではサイト制作の際に必要なTOPへ戻るボタンをJavaScript版とjQuery版の両方の解説をしていきます。

まずはJavaScript版のTOPへ戻るボタンから

JavaScript版　Topへ戻るボタン

こちらはjQueryのようにjQueryを使用するための記述がいらないので、JavaScriptの素のコードのまま利用できます。
jQueryの影響を受けずにできるだけ素のコード書きたい場合はjQuery版よりこちらがよいかもです。

HTML

<div class="container">
  <h1>JSでスクロール</h1>
  <p>テキストが入ります。</p>
  <p>テキストが入ります。</p>
  <!-- 省略 -->
  <p>テキストが入ります。</p>
  <p>テキストが入ります。</p>
</div>
<div id="js-scroll-top" class="top-btn"></div>

CSS

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container{
  text-align: center;
}
h1 {
  padding: 30px;
  font-size: 2rem;
}

.js-scroll-top {
  transition: opacity 0.4s;
  visibility: hidden;
  opacity: 0;
}

.js-scroll-top.js-fadein {
  visibility: visible;
  opacity: 1;
}

.top-btn {
  position: fixed;
  right: 36px;
  bottom: 36px;
  background-color: #333;
  color: #fff;
  cursor: pointer;
  border-radius: 22px;
  padding: 20px;
  transition: all 0.2s ease-in-out;
}

.top-btn:hover {
  opacity: 0.8;
  bottom: 35px;
}

.top-btn:before {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  top: 15px;
  left: 14px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  transform: rotate(-45deg);
}

JavaScript

const topBtn = document.getElementById('js-scroll-top');

window.addEventListener('scroll', function() {
  if (getScroll() > 300) {
    topBtn.classList.add('js-fadein');
  } else {
    topBtn.classList.remove('js-fadein');
  }
});
topBtn.addEventListener('click', function() {
  scrollToTop();
});

function getScroll() {
  return document.body.scrollTop || document.documentElement.scrollTop;
}
function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

続いてjQuery版のTOPへ戻るボタンです。

jQuery版　Topへ戻るボタン

jQueryの場合は、CDNもしくはダウンロード版のjQueryを使用するための記述を必ず忘れないように指定ください。
CDNの場合はこちらになります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

JavaScript版より記述も短いので、お手軽に実装したい場合はこちらがよいかもです。

HTML

<div class="container">
  <h1>jQueryでスクロール</h1>
  <p>テキストが入ります。</p>
  <p>テキストが入ります。</p>
  <!-- 省略 -->
　<p>テキストが入ります。</p>
  <p>テキストが入ります。</p>
</div>
<div id="scroll-top" class="top-btn"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

CSS

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container{
  text-align: center;
}
h1 {
  padding: 30px;
  font-size: 2rem;
}


.top-btn {
  position: fixed;
  right: 36px;
  bottom: 36px;
  background-color: #333;
  color: #fff;
  cursor: pointer;
  border-radius: 22px;
  padding: 20px;
  transition: all 0.2s ease-in-out;
}

.top-btn:hover {
  opacity: 0.8;
  bottom: 35px;
}

.top-btn:before {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  top: 15px;
  left: 14px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  transform: rotate(-45deg);
}

JavaScript（jQuery）

$(function(){
  $('#scroll-top').click(function(){
  let speed = 800;
  $("html, body").animate({scrollTop:0}, speed, "swing");
  return false;
  });
});

以上になります。