【はてなブログ】画面上部に移動するためのホバーの作成方法

はてなブログで「画面上部に移動するためのホバーの作成方法」

本ページの設定をするにあたっては、他のブロガ様の設定を参考にしました。
が、試行錯誤をして作成したこともあり引用元を記載できておらず申し訳ありません。

従いまして、本ページの設定を使用されるにあたり、引用元として本 URL を記載いただく必要はありません。
本ページの内容が、はてなブロガの皆様のお役に立てば幸いです。

なお、動作については、はてなPro でのみ確認しています。

 

動作

下図の右下にある「ページTOP▲」の機能を作成する。
f:id:dnkrnka:20180722223044p:plain:w800

コード

ダッシュボードより、デザイン → カスタマイズ → フッタ に以下を記述する。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script>
$(function () {
   /** ページトップ処理 **/
   // スクロールした場合
   $(window).scroll(function() {
       // スクロール位置が200を超えた場合
       if ($(this).scrollTop() > 200) {
           $('#pagetop').fadeIn();
       } else {
           // ページトップへをフェードアウト
           $('#pagetop').fadeOut();
       }
   });

   // ページトップクリック
   $('#pagetop').click(function() {
       // ページトップへスクロール
       $('html, body').animate({
           scrollTop: 0
       }, 300);
       return false;
   });
})(jQuery);
</script>