Skip to main content

ページ上部に戻るボタン

目標#

Webサイトをスクロールすると、ページ上部に戻るボタンが出現するようにしよう

サンプルコード#

1.HTMLのコードを、Glitchの index.html に追加しよう！#

<!-- (TRY!)ボタンを押したときに実行する関数を選ぼう --><a class="btn" id="scroll-to-top-btn" onclick="実行する関数名()">↑</a>

2.CSSのコードを、Glitchの style.css に追加しよう！#

#scroll-to-top-btn {    position: fixed;    bottom: 50px;    right: 80px;    height: 50px;    width: 50px;    /* ↓ボタンの矢印の色 */    color: #ffffff;    font-size: 32px;    /* ↓ボタンの色 */    background-color: #9e9e9e;    border: none;    border-radius: 50%;    outline: none;    text-align: center;
    opacity: 0;    transition-duration: 0.5s;}

3.ボタンの位置を調整しよう！#

style.cssの中の、bottom: 50px;とright: 50px;はボタンを表示する位置を指定しています。 bottom: 50px; は ページの下から50pxの位置、right: 50px; はページの右から50pxを指しています。

50pxの数字を変えて、自分の好きな位置に表示させましょう！

4.JavaScriptのコードを、Glitchの script.js に追加しよう！#

このコードがないと、ボタンはいくら押しても何も表示されません！

//ボタンconst scroll_to_top_btn = document.querySelector("#scroll-to-top-btn")
// ↓ この関数を、ボタンクリック時に実行したいfunction scroll_to_top() {    window.scroll({ top: 0, behavior: "smooth" })}
//スクロール時のイベントを追加window.addEventListener("scroll", scroll_event)
function scroll_event() {    if (window.pageYOffset > 200) { /* もしページ下の方に行ったら */        // ボタンを表示        scroll_to_top_btn.style.opacity = "1"    }     else if (window.pageYOffset < 200) { /* もしまだページ下の方ではなかったら */        // ボタンを非表示        scroll_to_top_btn.style.opacity = "0"     }}

4.index.html の (TRY!) と書いてある箇所を書き換えて、コードを完成させよう！#

うまく設定できたら、ボタンを押すと動作するようになります！