[CSS]TOPへ戻るボタンをつくる

CSSでTOPへ戻るボタンをつくる

業務で久々にCSSを触ったので備忘録

動作確認はChromeバージョン: 71.0.3578.98

index.html(抜粋)

<div id="page-top"><span class="page-top-icon">TOP</span></div>

main.css

#page-top {
    position: fixed;
    width: 40px;
    height: 40px;
    right: 8px;
    bottom: 48px;
    background-color: #505168;
    opacity: 0.7;
    border-radius: 50%;
    z-index: 10;
}

.page-top-icon {
    color: #FFF;
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-weight: bold;
}

右下に「TOP」と表示される

参考にしたサイト