新着コンテンツ
このサイトについて
「Web Work Plus」はWEB制作・ビジネスのちょい足し情報メデイアです。ちょっとしたハテナをプラスに変える役立つ備忘録を発信中！
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は多用するとページの表示が遅くなる原因にもなるので、ページを極力軽くしたい場合などには、あえてシンプルに実装するのも一案です。
「Web Work Plus」はWEB制作・ビジネスのちょい足し情報メデイアです。ちょっとしたハテナをプラスに変える役立つ備忘録を発信中！