<div class="container">
  <p>下にスクロールしてください。</p>
  <button class="js-backToTop">TOP</button>
</dic>

.container{
  height: 2000px;
  padding: 60px 20px;
}
p{
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
/* ボタンの指定 */
button{
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	right: 20px;
	bottom: 20px;
	width: 80px;
	height: 80px;
  font-size: 20px;
	font-weight: bold;
	color: #fff;
	background: #000;
  border: none;
	border-radius: 50%;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}
/* クラス付与時の指定 */
.is-active{
  opacity: 1;
  visibility: visible;
}

//要素を取得
const button = document.querySelector('.js-backToTop');

//クリックイベント
button.addEventListener('click', () => {
  //ページ上部へスムーススクロール
  window.scroll({ 
    top: 0, 
    behavior: "smooth"
  });
});

//スクロールイベント
window.addEventListener('scroll', () => {
  //スクロール量を判定して要素にクラスを付与
  if(window.scrollY > 100){
    button.classList.add('is-active');
  }else{
    button.classList.remove('is-active');
  }
});