
ページをたくさんスクロールしたらトップに戻るボタンがあると便利なの……♪

あっ、あれはね、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を使わなくても割と簡単に実装できちゃいますね。
それでは、また次回!

いつも遊びにきてくれてありがとう……♪