monoのメモ帳

HTMLとCSSを勉強しながらはてなブログをカスタマイズ中です。

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

トップへ戻るのボタン

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

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

ということで、今日は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>

雑感

他のサイトを見ると、aタグで「トップへ戻る」ボタンを作っているところの方が多いようでしたが、購入した書籍にはbuttonタグで作っていたのでbuttonタグを使っています。

buttonタグだと、カーソルをボタンに合わせても矢印から指さしマークに変わらないので、CSSでcursor: pointer;を設定して要素のカーソルが合わさると指さしマークに変わるようにしました。

それから、ボタンの中のwebフォントは、はてなブログのwebフォントを利用しているので、Font Awesomeを使うよりも少し軽いと思います。

関連記事:よく使うはてなブログのWebアイコンフォント - monoのメモ帳

JavaScriptのコードのところのif (window.scrollY >= 500) の数字を変えると、「トップへ戻る」ボタンの出てくる場所が変わります。今は500px下に行ったらボタンが出てくるようになっています。

behavior: 'smooth'を利用すると少しゆっくりとトップへ戻ります。

メモ書き

「addEventListener」→イベント処理を実行するメゾット
「document.querySelector」→指定されたセレクターまたはセレクター群に一致する、文書内の最初の Element を返す

掲載しているコードについて

当ブログでは、カスタマイズを行なっていく上で、HTMLやCSSなどのコードを掲載しています。 自由にコピペしてご利用いただいても構わないのですが、利用しているテーマなどによってはうまくいかない場合もございます。 また、コードを利用して不具合が生じた場合でも一切の責任は負いかねますので、その点はご理解、ご了承いただきますようよろしくお願いいたします。