[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」と表示される

参考にしたサイト