一、設定面板

二、新增背景圖片

在頁面定製CSS程式碼中新增如下部分，不選擇禁用模板預設CSS：

body {
    background: rgba(12, 100, 129, 1) url('http://images.cnblogs.com/cnblogs_com/Penn000/1013849/o_fr.jpg') fixed no-repeat;
    background-position: 50% 5%;
    background-size: cover;
}

三、新增返回頂部圖示(需申請JS許可權)

（1）選擇圖示

可在懶人相簿中選擇合適的返回頂部圖示，並儲存到本地：http://www.lanrentuku.com/gif/a/top.html

（2）設定圖片的外鏈

將本地圖片上傳到部落格園相簿，並複製圖片地址。
圖片示例：https://images.cnblogs.com/cnblogs_com/xuxin0501/1914723/t_210111123319%E8%BF%94%E5%9B%9E%E9%A1%B6%E9%83%A83.png?a=1610368568913

（3）新增程式碼

在頁首HTML程式碼中新增如下內容：

<!-- 回到頂部 -->
<style>
  #back-top {
    position: fixed;
    bottom: 5rem;
    right: 5rem;
    z-index: 10;
  }

  #back-top span {
    width: 60px;
    height: 128px;
    display: block;
    background: url(https://images.cnblogs.com/cnblogs_com/xuxin0501/1914723/o_210111120904%E8%BF%94%E5%9B%9E%E9%A1%B6%E9%83%A8%E5%9B%BE%E6%A0%87.png) no-repeat center center;
  }

  #back-top a {
    outline: none
  }
</style>
<script type="text/javascript">
  $(function () {
    // 預設是隱藏“回到頂部”按鈕
    $("#back-top").hide();
    // 滾動距離頂部 10 畫素時 淡入、淡出
    $(window).scroll(function () {
      if ($(this).scrollTop() > 10) {
        $('#back-top').fadeIn();
      } else {
        $('#back-top').fadeOut();
      }
    });
    // 回到頂部，點選事件
    $('#back-top a').click(function () {
      $('body,html').animate({
        scrollTop: 0
      }, 800);
      return false;
    });
  });
</script>
<p id="back-top" style="display:none" title="回到頁面頂部"><a href="#top"><span></span></a></p>