【Blogger】jQueryを使わず作る「トップへ戻る」ボタン

日付:

最近テーマからjQueryを削除する為、該当機能を廃止したりJavaScript（Pure JavaScript等と呼ぶ人もおる）で書き直したりしています。

今回は、テーマ内でjQueryを使って動かしていた"トップに戻る"ボタンをJavaScriptのみで動作する仕様変更をしてみました。

JavaScriptを使った「トップに戻る」ボタンを設置

個人的にこの機能は不要だと思っています。PCならスライダーで上下自在だし、スマホでも指先1つでスクロール出来るので、必要性が分かりません。

なので、自身のブログでは投稿が終わったあたりにコソッと置いてありますが、今後どうするか分かりません。

とりあえず今回はjQueryを廃止したいので、JavaScriptで書き換える事にしました。

window.scrollTo()

ページのトップに戻るには、絶対値0地点に移動すればいいだけ。そんな移動を実現する関数window.scrollToを使います。

構文
window.scrollTo(options)
3つのプロパティを使い記述する方法

window.scrollTo(x-coord, y-coord)
移動させたいx軸y軸上をピクセルで記述する方法

構文は以上の二通りありますが、今回はoptionsを使う方法にしました。

HTML&JavaScriptの変更

変更する場合、テーマ（テンプレート）のバックアップを取ってから変更しましょう。

HTMLの変更はBloggerの管理画面より テーマ＞＞HTMLの編集と進みテンプレートのHTMLを変更します。尚、変更については自己責任でお願いします。

HTMLはボタンという程の物ではありませんが、投稿ページの時だけに"トップへ戻る"を配置しています。

本当はボタンタグを使用した方が良いのですが、簡単にテキストをクリックするだけなのでdivタグのみにしました。

<a href='#'>タグも不要です。

HTML
<!--記事内トップへ戻る-->
<b:if cond='data:blog.pageType == "item"'>
  <div id='page-top'>トップへ戻る</div>
</b:if>


続いて以下のJavaScriptをテーマのHTML後方、</head>の直上に記述します。

JavaScript
<!-- トップへ戻る -->
<script>  
const PageTopBtn = document.getElementById('page-top');
PageTopBtn.addEventListener('click', () =>{
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});
</script>


ちょっと説明
PageTopBtnにpage-top(class id)を宣言します。
イベントでPageTopBtnがクリックされると以下が実行されます。

window.scrollTo({
   top: 0,
   behavior: 'smooth'
  });

クリックされると左上0地点(top:0)へスルスル(behavior:'smooth')とスクロール(window.scrollTo)させています。

最初の値top:の他に横方向のleft:も指定できます。
behavior:の値は'smooth','instant','auto'の3つ。
'smooth'はスルスルっとスクロールします。
'instant'と'auto'は指定した位置迄瞬時に移動します。

window.scrollToでは、上に移動するにつれてスクロール速度が遅くなったりする凝った仕組みは実行出来ませんが、トップに戻る機能でそんなに凝らなくてもいいでしょう？

余談ですが、cssだけでも scroll-snapとscroll-behaviorを組み合わせてトップへ戻る機能が作れるのですが、オススメしません。Safariなど使用出来ません。

あとボタン自体はスクロールに追従しても良いし、一定のスクロール量でボタンを表示させても良いと思いますが、別にいらないかなぁ。


以上

コメント

コメントを投稿