目次
あると便利 ページトップにスクロールするボタン
このところ、JavaScriptの勉強を兼ねて、他の人が作成したブログを見させていただいております。
ある時、ある人のブログを見ていたところ、ウェブサイトの右下にボタンが配置されていて、それをクリックするとページトップにスクロールしました。
これは便利だと思い、早速、どのように実現されているのか調べてみました。
使い方 ページトップにスクロールするボタンの作成
ページトップにスクロールするボタンを作成するJavaScriptの使い方は次の通りです。
ブログ内の最後の位置に、次のHTMLタグを記述します。
<style>
button {
position:fixed;
bottom:20px;
right:20px;
opacity:0;
transition: opacity 250ms ease-out;
}
</style>
<button id="SclBtn">トップへ移動</button>
<script>
JavaScriptソースコード
</script>
JavaScriptソースコードは、下記の解説を参照ください。
アルゴリズム ページトップにスクロールするボタンの作成
ページトップにスクロールするボタンを作成するJavaScriptに関するアルゴリズムは次の通りです。
- ブログ内のボタンタグを検索
- ブログの上下方向のスクロールイベントを検出し、下方向へのスクロール量が一定値を超えるとボタンを表示、越えなければボタンを非表示
- 検索したボタンのクリックイベントを検出し、ページトップへのスクロールを実行
STYLEタグコード 解説
<style>で指定されたコードのポイントは、次の通りです。
button {
position:fixed;
bottom:20px;
right:20px;
opacity:0;
transition: opacity 250ms ease-out;
}
行番号1では、<style>で指定されたコードが<button>向けの内容であることを示しています。
行番号2では、<button>の位置がfixed(固定)であることを指定しています。
行番号3～4では、<button>の配置が、画面の底(bottom)から20px上、かつ、画面の右(right)から20px右であることを指定しています。
行番号5では、<button>の表示が透明(opacityが0)であることを指定しています。
行番号6では、<button>の透明度を、250msの時間を消費し、イージング関数に従って制御します。
イメージとしては、ボタンを、フッと表示したり、消したりします。
JavaScriptソースコード 解説
ページトップにスクロールするボタンの作成用JavaScriptソースコードを次に記載します。
// スクロールボタンのHTMLタグを抽出
let SclBtn = document.getElementById('SclBtn');
// HTMLタグ(ID = SclBtn)の存在を確認
if (null !== SclBtn) {
//
// HTMLタグ(ID = SclBtn)が存在する場合
//
// スクロールボタンのイベントリスナーを登録
SclBtn.addEventListener('click', function() {
// top: 0 → ページトップ(Y=0)にスクロール
// behavior: 'smooth' → スクロールスピードをゆっくりと
window.scrollTo({top: 0, behavior: 'smooth'});
});
// ページの高さ
const PageHeight = document.documentElement.scrollHeight;
// 表示画面の高さ
const WindowHeight = document.documentElement.clientHeight;
// スクロール可能な高さ
const LocalScrollHeight = PageHeight - WindowHeight;
// 画面スクロールのイベントリスナーを登録
window.addEventListener('scroll', function () {
// 現在のスクロール量
const scroll = window.pageYOffset;
// スクロール量がスクロール可能な高さの50%を超えた場合にスクロールボタンを表示
if ((scroll / LocalScrollHeight) > 0.5) SclBtn.style.opacity = 0.7;
else SclBtn.style.opacity = 0;
});
}
JavaScriptソースコードのポイントを以下に記載します。
行番号2では、スクロールボタンのHTMLタグを抽出しています。
行番号5では、スクロールボタンのHTMLタグの存在を確認しています。
行番号11～15では、スクロールボタンがクリックされたイベントを検出して、ページトップにスクロールする処理を行っています。
行番号18～24では、ブログ全体のページの高さ(PageHeight), ブログが表示される画面の高さ(WindowHeight)からブログのスクロール可能な高さ(LocalScrollHeight)を取得しています。
行番号27～34では、画面がスクロールされたイベントを検出して、スクロールされた高さがスクロール可能な高さの50%を超えればスクロールボタンを表示し、50%を越えなければスクロールボタンを透明にする処理を行っています。
なぜかうまく動かないソースコードの例
ページトップにスクロールするボタンを作成する際に、なぜかうまく動作しなかったJavaScriptソースコードの実例を2つ紹介します。
正常に動作するソースコードの行番号11～15を次のように記述すると、ボタンをクリックしてもスクロールしませんでした。
NGケース1
SclBtn.addEventListener('click', window.scrollTo({top: 0, behavior: 'smooth'}));ボタンをクリックしてもスクロールせず、うんともすんとも動かない状態です。
NGケース2
const ScrollOption = {
top : 0, // ページトップ(Y=0)にスクロール
behavior : 'smooth' // スクロールスピードをゆっくりと
}
SclBtn.addEventListener('click', window.scrollTo(ScrollOption));
こちらも、NGケース1と同様に動きませんでした。
どうやら、addEventListenerの第2引数に直接scrollTo()関数を記述するとダメなようです。
