kdcsライブラリー

ページトップに戻るボタンをjQuery使わずに行う方法
※ios15以前では「behavior: ‘smooth’」が効かないため、

html

<button id="page-top-js"><i class="fa icon-up-open"></i>◆</button>

javascript

// ページトップ スクロール jQuery不要-------------------------------------------
const topButton = document.querySelector('#page-top-js');

topButton.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

window.addEventListener('scroll', () => {
  if(window.scrollY > 300) {
    topButton.style.bottom = '10px';
  } else {
    topButton.style.bottom = '-60px';
  }
});

css

#page-top-js{
    background-color: rgba(0,0,0,0.6);
}
#page-top-js:not(:target){
    filter: none;
    -ms-filter: none;
}
#page-top-js{
  display: block;
  position: fixed;
  z-index: 9999;
  bottom: -60px;
  right: 10px;
  width: 80px;
  padding: 20px 5px;
  background: rgba(78, 95, 185, 0.9);
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: .5s;
  border-radius: 5px;
}
#page-top-js:hover{ 
  background: rgba(72, 129, 217, 0.9);
}