【コピペで楽々】はてなブログにトップへ戻るボタンを実装するCSSカスタマイズ

トップに戻るボタンを実装しました。クリックすると記事の一番上に戻ります。

 完成予想図

コードを貼り付ける場所

スマートフォンページのヘッダ→タイトル下に貼り付けてください。

コピペするコード

<!--トップへ移動ボタン-->

<div class="sy-topbtn"><i class="blogicon blogicon-chevron-up"></i></div>
<style>
.sy-topbtn{
    z-index:2;
  position:fixed;
  bottom:0;
  right:5px;
  background-color:rgba(80,81,79,.4);
  display:inline-block;
  padding:10px 15px;
  color:white;
  border-radius:50%;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function() {
  $(".sy-topbtn").click(function(){
  $("html,body").animate({scrollTop:0},200);
});
});
</script>

スクロールスピードの変更方法

コードの最後の部分の数字を変更することで速度を変更できます。デフォルトは0.2秒です。下のコードの場合0.5秒になります。

$(function() {
  $(".sy-topbtn").click(function(){
  $("html,body").animate({scrollTop:0},500);
});
});
</script>

TOPに戻る不要論もある

トップに戻るは使用率が低く、無理に導入する必要がないという意見もあります。

トップに戻るボタンを使う人はおそらく「ページトップのグローバルメニューを見たい」「プロフィールやオススメ記事などのコンテンツが上にあるので確認したい」などの意図だろう。読者の方のためには、特別なこだわりがない場合は「念のため」的な扱いで設置する意味はありそうです。

過去に作ったカスタマイズはこちらをどうぞ

今まで作成したはてなブログカスタマイズ一覧