CSSで簡単実装！
トップリンク機能の作り方
ぽちっと押すと、自動でページ上部まで戻ることができるトップリンク機能。
ここでは、java scriptや追加素材を使わず、HTMLとCSSだけで実装するトップリンクのサンプルを２つ紹介しています。
１つは、シンプルなテキストタイプのトップリンク。
もう１つは、スマートフォンで見た時に、画面右下に常駐するタイプのボタン風トップリンクです。
さっそく見ていきましょう！
テキストだけのトップリンクの作り方
基本的なトップリンクの仕組みは、HTMLだけで実装できます。
まずはbodyなどの「ページ全体を内包する要素」に対してIDをつけます。
あとは、そのIDをジャンプ先に指定したリンクを置くだけでトップリンクの出来上がりです。
リンクをタップ（クリック）すると、一瞬でページ上へ移動します。
※サンプルを押すとページ上へ移動します。
<body id="top">
<a href="#top" class="toplink">ページトップへ</a>
</body>
a{
margin: 0;
padding: 0;
text-decoration: none;
outline: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
cursor: pointer;
}
.toplink{
margin-right: 1em;
display: block;
text-align: right;
}
.toplink a{
color: skyblue;
border-bottom: solid 1px skyblue;
}
サンプルでは、aタグについているデフォルトの装飾を一度無効にしてから、独自の装飾をつけています。
また、個人的に「左寄り」よりも「右寄り」の方が使いやすいので、右に寄せてあります。お好みで変更してみてください。
画面固定のトップリンクの作り方
CSSでボタン風に装飾すると、画面下に常駐するトップリンクボタンにする事もできます。
※サンプルを押すとページ上へ移動します。
<body id="top" class="toplink2">
<a href="#top"></a>
</body>
a{
margin: 0;
padding: 0;
text-decoration: none;
outline: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
cursor: pointer;
}
.toplink2{
position: relative;
}
.toplink2 a{
margin: 0;
padding: 0;
position: fixed;
bottom: 10%;
right: 10%;
width: 55px;
height: 55px;
color: #fff;
background: skyblue;
border-radius: 50%;
opacity: 0.8;
z-index: 100;
}
.toplink2 a::before{
content: "▲";
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
font-size: 35px;
opacity: 0.8;
speak: none;
}
@media (min-width: 600px){
.toplink2{ display: none; }
}
こちらのトップリンクボタンは、リンクテキストを入れず、疑似要素でアイコンっぽく装飾しています。
無料で使えるアイコンフォント『Font Awesome』などを利用すると、もっと自由度の高いアイコンも使う事ができますが、ここでは追加素材なし作れるサンプルにしてみました。
こういったトップリンクボタンは、PCやタブレットなどで見る時はあまり使わない（本文域を飛び出して目立つ、本文域にあると邪魔）といった事もあるので、メディアクエリで一定以上の画面幅では非表示になるように指定しています（ここでは600px）。
また、設置する位置によっては誤タップしやすくなり、返ってユーザビリティが低下する場合もあるので、実際にページに組み込む場合は、ちょうどよさげな位置に調整してみてください。
「.toplink2」の「bottom:」「right:」の数値をいじると、位置を調整できます。
トップリンク余談
HTMLとCSSだけで、意外と簡単に実装できるトップリンク。
するするっとなめらかに移動したり、スクロールしてからボタンを表示させる、といった細かなエフェクトの実装にはjava scriptが必要になりますが、シンプルな機能だけならHTMLとCSSだけで十分実装可能です。
java scriptは多用するとページの表示が遅くなる原因にもなるので、ページを極力軽くしたい場合などには、あえてシンプルに実装するのも一案です。
