ページをたくさんスクロールしたらトップに戻るボタンがあると便利なの……♪
あっ、あれはね、JavaScriptで実装できるんだってっ
最近ブログ更新怠け気味のかがみさーん、出番ですよー！
もー、さくらもちちゃんったら
こんにちは、かがみ（@cony_tas）です！
ページ内のコンテンツが多い時、下のほうまでスクロールしたら「ページトップへ戻るボタン」があると便利ですよね？
今回はボタンを押した時にページトップへ戻る動作をJavaScriptで実装してみようと思います。
動作に使うボタンはHTML/CSSでお好きなものを用意していただいて、適当にユニークなクラス名だけ付けておいてください♪
それでは、行ってみましょうー！
記事の内容
JavaScriptでページトップへ戻る機能の実装方法
記事の信頼性
現役Web/UIデザイナー兼フロントエンドエンジニアのかがみ（@cony_tas）が解説します。
JavaScriptでページトップへ戻るボタンの実装方法
さて、まずは実装用のコードを書いていきますね。
実装用コード
const gotoTop = function () {
const btn = document.querySelector( '.btn-to-top' );
let nowY;
btn.addEventListener( eventType, function () {
( function doScroll() {
nowY = window.scrollY || window.pageYOffset;
window.scrollTo( 0, nowY / 1.1 );
if ( nowY > 0 ) {
setTimeout( doScroll, 10 );
}
} ) ();
}, false );
}
gotoTop();
上記のコードの中で、あなたに書き換えてほしい部分が下記になります。
const btn = document.querySelector( '.btn-to-top' );
「.btn-to-top」のクラス名は僕が適当に付けたものなので、あなたのサイトのページトップへ戻るボタンに付けたクラス名に変更してください。
そして、クラス名を変更した上でJavaScriptのコードを全部コピペしていただければ動作すると思いますので、ぜひお試しくださいね。
最後に：JavaScriptでページトップへ戻るボタンの実装方法
僕は基本的に素のjavaScriptで書くんですが、jQueryを使わなくても割と簡単に実装できちゃいますね。
それでは、また次回！
いつも遊びにきてくれてありがとう……♪
