【CSSだけ】トップに戻るボタンの作り方【コピペでOK】

「トップに戻るボタン」は便利なものですが、その作り方や右下に固定する方法など意外とわからないものです。

javascriptを使わず、CSSだけでトップに戻るボタンを右下に固定する方法を解説します。

コードはコピペでOKです。

CSSは使わずhtmlのみで作りたい方はこちら↓

当記事は作り方・考え方を丁寧に解説しています。

急いでいるかたは「5.完成のコード」へジャンプし、コピーしていってください。

画面右下にあるボタンが完成形です。

1.トップに戻るボタンのデザイン

トップへ

<style>
.gotop{
    display: block;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    background: #FFF;
    border: 1px solid #999;
    padding-top: 30px;
    text-align: center;
    letter-spacing: -1px;
    font-size: 85%;
    text-decoration: none;
    color: #333;
    opacity: 0.5;
    position: relative;
}
.gotop::before{
    content: "";
    display: block;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    width: 25%;
    height: 25%;
    top: 25%;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    transform: rotate(-45deg);
}
.gotop:hover{
    opacity: 1;
}
</style>
<a href="#" class="gotop">トップへ</a>

「トップに戻るボタン」はあってもなくてもいいけど、あると便利なボタンです。

その特徴を考慮しつつボタンのデザインを作りましょう。

html

「href="#"」と指定するとページ上部に飛びます。本来「#」はアンカー（目印）と組み合わせてページ内ジャンプします。アンカーがないときはページ上部に飛びます。

また、htmlの記述位置は「</body>」の直前がいいでしょう。

大きさ

大きさはパソコン版では60px程度、スマホ版では40px程度がオススメです。

パソコンはサイズが大きいため大きめでも大丈夫です。小さいと逆に押しづらくなります。

スマホではボタンが必ず記事と被ってしまいます。なるべく邪魔にならないように小さくし隅に寄せましょう。

具体方法は後述します。

形

例ではシンプルに四角にしています。

border-radiusで角丸にしたり、正円にするのもいいでしょう。

正円の場合クリック範囲が小さくなります。

文字は窮屈になるのでなくすのもアリです。

枠をなくし背景を透明にして、矢印だけでもいいでしょう。その場合でもクリック範囲は確保しましょう。

文字

60px程度のボタンと考えると文字数はあまり入りません。文字を小さくし、間を詰めてようやく4文字が限界でしょう。

矢印があることで、文字がなくても「トップに戻るボタン」だとわかるため、文字はなくてもなりたちます。

色

「トップに戻るボタン」は目立つ必要がありません。よって白など無彩色か薄めの色でいいでしょう。

また右下に固定するので記事に重なる場合があります。

重なっても一応読めるほうにopacityで透明にするといいでしょう。

マウスを乗せたときopacityを1にし、はっきり見えるようにしています。

矢印

ボタンにはpadding-topで矢印を置くスペースを用意します。

beforeで矢印を作りposition:absoluteで位置を調整しましょう。

矢印を作るのが面倒なら、テキストの「↑」でもいいかもしれません。

2.右下に固定する方法

.gotop{
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
}

さて本題の右下に固定する方法ですが、「position: fixed」を指定します。

「position: fixed」は画面上に固定するCSSです。スクロールされても同じ位置にあります。

先ほど「position: relative」を指定していましたが、これを「position: fixed」に変更しましょう。

bottomは下方向から、rightは右方向からの位置調整するCSSです。

ピッタリくっつけるより20px程度内側にあるほうが利用しやすいでしょう。

「z-index」は要素が重なったときの順番を指定するCSSです。

数値が大きいほど前に来ます。

「z-index: 10000」も指定しておけば最前面に来るでしょう。

3.スムーズスクロールする方法

html{
    scroll-behavior: smooth;
}

上記のように記述するとCSSだけでスムーズスクロールができます。javascriptは不要です。

この「トップに戻るボタン」だけでなく、他のページ内ジャンプでもスムーズスクロールされます。

例によりIEでは効きませんが、崩れるわけではないためいいでしょう。

スムーズスクロールはあってもなくてもいいけど、あればわかりやすいでしょう。

急にトップに戻ると、同じページのトップに戻ったのか、別のページにジャンプしたのか一瞬わかりません。

スムーズスクロールすると上に向かって動いたことがわかるため同じページ内であることがわかります。

4.レスポンシブ対応

@media(max-width:750px){
    .gotop{
        width: 40px;
        height: 40px;
        text-indent: -9999px;
        opacity: 1;
        border: none;
        background: none;
        bottom: 10px;
        right: 10px;
    }
    .gotop::before{
        bottom: 0;
    }
}

パソコンではスクロールバーをマウスで引っ張ったり、キーボードの「Home」を押してカンタンにトップに戻れますが、スマホではひたすらスワイプしてスクロールするしかトップに戻れません。

スマホでは「トップに戻るボタン」は重要です。

一方で右側に隙間がなく、ボタンが邪魔になりがちです。

なるべく邪魔にならないよう考慮する必要があります。

レスポンシブ対応するには「@media(max-width:750px)」のようにメディアクエリを使いスマホ用のコードを用意します。

大きさを40px程度に小さくします。文字サイズもそれに伴い小さくしましょう。

「text-indent: -9999px」を指定して文字をなくすのもアリです。

文字をなくした場合矢印がクリック範囲の中心に来るように調整しましょう。

位置調整について、bottomとrightもさらに小さく10px程度にします。

スマホではマウスオーバーは意味ないので半透明はやめてはっきり表示させます。

その代わり、邪魔しないように背景･線もとっぱらうのもアリです。

5.完成のコード

上記を全部合わせると下記のコードになります。コピペでOKです。

実際のボタンはこの画面の右下にあります。ブラウザ幅を変えて確認してみてください。

トップへ

html（</body>の直前に記述）

        <a href="#" class="gotop">トップへ</a>
    </body>
</html>

CSS

html{
    scroll-behavior: smooth;
}
.gotop{
    display: block;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    background: #FFF;
    border: 1px solid #999;
    padding-top: 30px;
    text-align: center;
    letter-spacing: -1px;
    font-size: 85%;
    text-decoration: none;
    color: #333;
    opacity: 0.5;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
}
.gotop::before{
    content: "";
    display: block;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    width: 25%;
    height: 25%;
    top: 25%;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    transform: rotate(-45deg);
}
.gotop:hover{
    opacity: 1;
}
@media(max-width:750px){
    .gotop{
        width: 40px;
        height: 40px;
        text-indent: -9999px;
        opacity: 1;
        border: none;
        background: none;
        bottom: 10px;
        right: 10px;
    }
    .gotop::before{
        bottom: 0;
    }
}

【まとめ】トップに戻るボタンを右下に固定する方法

1.トップに戻るボタンのデザイン

目立つ必要はありません。さりげないデザインにしましょう。

2.右下に固定する方法

.gotop{
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
}

3.スムーズスクロールする方法

html{
    scroll-behavior: smooth;
}

4.レスポンシブ対応

記事にボタンが重なることを考慮し邪魔にならないようにしましょう。

以上、トップに戻るボタンをCSSで右下に固定する方法でした。