htmlのみの「ページトップへ戻る」の作り方【CSSなし！】

「ページトップへ戻る」があると記事をもう一度読み返してもらったり、上部のメニューから他の記事へ遷移してもらったりと便利ですね。

「でも、CSSはよくわからない！そんな大げさなものじゃなくていいからhtmlだけでできないの!?」

htmlのみでできる「ページトップへ戻る」の作り方を解説します。

htmlのみの「ページトップへ戻る」リンク

↓少しスクロールしてからクリックしてみてください。ページトップへ戻ります。

<div><a href="#">ページトップへ戻る</a></div>

aタグのhrefの値を"#"にするだけで完成です。

「ページトップへ戻る」のテキストは自由に変えてOKです。

divタグはpタグでもOKです。

リンクをボタンにする

「ページトップへ戻る」がただのテキストリンクじゃ味気ない！ボタンにしたい！でもやっぱりCSSは使いたくない！という方は下記記事を参考にしてください。

ただ「ページトップへ戻る」は なくてもいい機能であるため、あまり目立たせる必要はないと思います。

右寄せにしたい場合

<div align="right"><a href="#">ページトップへ戻る</a></div>

右寄せするにはaタグを囲っているdivまたはpに「align="right"」を指定します。

html5ではalign属性非推奨なので本当はCSSを使った方がいいのですが、ちゃんと効きます。

styleタグでCSSをhtmlファイルに貼る

CSSは使っていますが、styleタグで紹介しているのでCSSファイルを使わず、htmlファイルに貼るだけでも完成します。

コピペだけで完成するので、もう少し凝った「ページトップへ戻る」にしたい場合は使ってみてください。

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

トップへ

<style>
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;
    }
}
</style>
<a href="#" class="gotop">トップへ</a>

詳しくは下記記事で解説します。

【まとめ】htmlのみ「ページトップへ戻る」

左寄せ

<div><a href="#">ページトップへ戻る</a></div>

右寄せ

<div align="right"><a href="#">ページトップへ戻る</a></div>

以上、htmlのみの「ページトップへ戻る」の作り方でした。