JavaScriptでページトップへ戻るボタンの実装方法

JavaScript
ウサギさん
ページをたくさんスクロールしたらトップに戻るボタンがあると便利なの……♪
モチ
あっ、あれはね、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を使わなくても割と簡単に実装できちゃいますね。

それでは、また次回!

ウサギさん
いつも遊びにきてくれてありがとう……♪