window.innerHeight

JavaScriptのwindow.innerHeightで右下にトップに戻るボタンを追従させて表示

2022年8月5日 5分

JavaScriptなしでも作れるオブジェクトですが、JavaScriptの window.innerHeight を使って、少しスクロールした時に表示される「トップに戻る」ボタンを作ります。

是非、最後までご覧いただけると嬉しいです。

window.innerHeight
トップに戻るボタンを表示するサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

window.innerHeight

JavaScriptの innerHeight は、ウィンドウの内部の高さをピクセル単位で返すプロパティです。

const windowBottom = window.innerHeight;

かかかず

「ウィンドウの高さ」を取得するプロパティです。

このプロパティはスクロールバーのサイズも含まれた高さを取得するので、スクロールバーを引いた高さを取得する場合には clientHeight() プロパティを使います。

トップに戻るボタンを表示するサンプル

ブラウザのコンテンツ領域の高さを取得する window.innerHeight で設定しています。ので、デフォルトでこのページをみた時のウィンドウサイズを超過すると「トップに戻る」ボタンが表示されます。

かかかず

この記事でも、下にスクロールすると「トップに戻る」ボタンが表示されます。

実装の手順と方法

コードの解説の前に、ざっくりとした実装の手順と方法について解説します。a タグはJavaScriptで挿入するので、2つのSTEPで完了します。

JavaScriptを記述

はじめに、JavaScriptを記述します。

コードは <body>〜</body>で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

// bodyタグを取得
const documentBody = document.querySelector('body');
// aタグをbodyタグ直下に追加
var newElement = document.createElement("a");
newElement.setAttribute("class","backToTop");
documentBody.prepend(newElement);
newElement.href = "#";

// ウィンドウサイズを取得
const windowBottom = window.innerHeight;
console.log(windowBottom);
const topBtn = document.querySelector('.backToTop');
// スクロールで表示
window.addEventListener('scroll', ()=> {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (scrollTop >= windowBottom) {
    topBtn.style.opacity = 0.6;
    topBtn.style.pointerEvents = "auto";
    }
    else {
    topBtn.style.opacity = 0;
    topBtn.style.pointerEvents = "none";
    }
});

CSSを記述

CSSを書きましょう。これで見た目を整えたら完了です。

コードを表示

/* スムーススクロール */
html{
  scroll-behavior: smooth;
}
/* トップに戻るボタン */
a.backToTop {
    background: #5ba9f7;
    width: 55px;
    height: 55px;
    position: fixed;
    right: 50px;
    bottom: 50px;
    opacity: 0;
    z-index: 999;
    border-radius: 9999px;
    display: inline-block;
    transition: opacity 0.8s;
    pointer-events: none;
}
/* 上三角 */
a.backToTop:before {
    display: inline-block;
    color: #FFF;
    line-height: 1;
    width: 0.8rem;
    height: 0.8em;
    border: 0.2em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    content: "";
    z-index: 1000;
    opacity: 1;
    left: 50%;
    top: 55%;
    position: absolute;
    transform: translate(-50%, -50%) rotate(-45deg);
}
/* hover時 */
a.backToTop:hover {
    opacity: 0.8 !important;
}

かかかず

あっさりですが、これで完了です。

ざっくりとしたコードの解説

コードはJavaScript・CSSの2種類です。ざっくりですが、順に解説していきます。

JavaScript

JavaScriptは、冒頭でまず「body タグ直下に a タグを追加」「ウィンドウサイズを取得」します。その次に、「ウィンドウサイズを取得」して「スクロールでトップに戻るボタンを表示」させます。

// bodyタグを取得
const documentBody = document.querySelector('body');
// aタグをbodyタグ直下に追加
var newElement = document.createElement("a");
newElement.setAttribute("class","backToTop");
documentBody.prepend(newElement);
newElement.href = "#";

// ウィンドウサイズを取得
const windowBottom = window.innerHeight;
console.log(windowBottom);
const topBtn = document.querySelector('.backToTop');
// スクロールで表示
window.addEventListener('scroll', ()=> {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (scrollTop >= windowBottom) {
    topBtn.style.opacity = 0.6;
    topBtn.style.pointerEvents = "auto";
    }
    else {
    topBtn.style.opacity = 0;
    topBtn.style.pointerEvents = "none";
    }
});

JavaScriptのコードを分離してHTMLで記述する場合

コードの冒頭に、JavaScriptで a タグを挿入しています。コードのコメントアウトしてある「// aタグをbodyタグ直下に追加」の各4行（※コメントアウト含む）がそのコードです。

このコードは、HTMLで別途記述することが可能です。その場合は、コメントアウトしてある当該箇所を削除の上、HTMLに以下のコードを任意の箇所に記述しましょう。

<a href="#" class="backToTop"></a>

かかかず

HTMLを別途記述する場合は、body タグの直下に記述しましょう。

CSS

CSSは、「トップに戻るボタン」に関する記述内容がほとんどです。

/* スムーススクロール */
html{
  scroll-behavior: smooth;
}
/* トップに戻るボタン */
a.backToTop {
    background: #5ba9f7;
    width: 55px;
    height: 55px;
    position: fixed;
    right: 50px;
    bottom: 50px;
    opacity: 0;
    z-index: 999;
    border-radius: 9999px;
    display: inline-block;
    transition: opacity 0.8s;
    pointer-events: none;
}
/* 上三角 */
a.backToTop:before {
    display: inline-block;
    color: #FFF;
    line-height: 1;
    width: 0.8rem;
    height: 0.8em;
    border: 0.2em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    content: "";
    z-index: 1000;
    opacity: 1;
    left: 50%;
    top: 55%;
    position: absolute;
    transform: translate(-50%, -50%) rotate(-45deg);
}
/* hover時 */
a.backToTop:hover {
    opacity: 0.8 !important;
}

滑らかにスクロールさせる「スムーススクロール」の為に、scroll-behavior: smooth; を html タグにあてましょう。

かかかず

これがないと、アンカークリックで「ガバッと」スクロールしてしまいます。