趣味イラストレーターのオタク主婦のひっそりブログ。

とりとめのない日記です。メインサイト:http://hide.kanari.info/ ブログ:http://kanari.info/b/

はてなブログのインターフェイスに、スクロールすると出てくる「トップへ戻る」リンクを実装しました。

↓ コレです。

f:id:k-h:20140108162308j:plain

ページの右下に表示されます、ピコっと現れる小粋なヤツです。何となく、表示されている方が「気の利いている」雰囲気になると思ったので実装してみました。

超簡単な実装手順。(2ステップ)

f:id:k-h:20140108162357j:plain

まずは、デザイン設定の「フッタ(上部引用画像部分)」に以下の記述をします。

<a href="#top" id="backtop">▲TOPへ</a>
<script>
if (document.addEventListener) {
window.addEventListener("scroll", scrollToggle, false);
} else {
window.attachEvent("onscroll", scrollToggle);
}
function scrollToggle(e){
var scl = document.documentElement.scrollTop || document.body.scrollTop;
document.getElementById("backtop").style.display = scl > 300 ? 'block' : 'none';
}
</script>

ソースは、JavaScriptだけでTOPへ戻るリンクの表示 - 勉強したことのメモを参考にさせていただきました。CSSでデザインを制御できるよう、ちょっとだけ変えてます。

f:id:k-h:20140108162530j:plain

↓ 次に、「デザインCSS(上部引用画像部分)」に以下の記述をします。

#backtop{padding:10px;background:#fff;position:fixed;right:0;bottom:0;border-radius:7px 0 0 0;moz-border-radius:7px 0 0 0;-webkit-border-radius:7px 0 0 0;opacity:0.7}

 これで、トップへ戻るボタンは実装できました。ありがたいです。
テキストではなく、アイコン素材などを使うとオリジナリティが出ていいかもですね♪

すべての人に知っておいてほしい スタイルシートデザインの基本原則

すべての人に知っておいてほしい スタイルシートデザインの基本原則

 
広告を非表示にする

▲TOPへ