トップへ戻るのボタンを作る｜はてなブログカスタマイズ

はてなブログをカスタマイズしたくてHTMLとCSSの勉強をはじめたのですが、JavaScriptを覚えるともっといろんなことができるみたいで、JavaScriptの本も買いました。

はじめてのJavaScriptなので、まだ右も左もわかりませんが、ちょっとずつ勉強していきたいと思います。

ということで、今日はJavaScriptで「トップへ戻る」ボタンを作ってみました。

トップへ戻るのボタンのCSS
トップへ戻るのボタンのJavaScript
雑感

トップへ戻るのボタンのCSS

「管理画面」→「デザイン」→「カスタマイズ」 →「デザインCSS」に下記をコピペします。

※すでに何か記述がある場合は絶対に消さないでください。

/* トップへ戻るボタン */
.moveToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: rgba(132,177,201,.7);/* 背景色 */
  padding: 15px;
  height: 45px;
  width: 45px;
  border: solid 1px #84b1c9;
  border-radius: 50%;
  color: #fff;/* 文字の色 */
  cursor: pointer;
  display:none;
  line-height: 15px;
  text-align: center;
  box-sizing: border-box;
}
 .moveToTop:hover {
  opacity: .5; 
}

トップへ戻るのボタンのJavaScript

「管理画面」→「デザイン」→「カスタマイズ」 →「フッタ」に下記をコピペします。

※すでに何か記述がある場合は絶対に消さないでください。

<button type="button" class="moveToTop"><i class="blogicon-chevron-up"></i></button>
<script>
  window.addEventListener('scroll', function() {
    const button = document.querySelector('.moveToTop');
    if (window.scrollY >= 500) {
      button.style.display = 'block';
      } else {
      button.style.display = 'none';
      }
    });

    const button = document.querySelector('.moveToTop');
    button.addEventListener('click', function() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
  });
</script>