[Blogger] ある程度スクロールしたらフェードインで表示されるページの先頭へ戻るボタンを追加する方法

[Blogger] ある程度スクロールしたらフェードインで表示されるページの先頭へ戻るボタンを追加する方法 - Animated Scroll to Top

以前、2回クリックするだけで追加できるページの先頭へ戻るボタンをさり気なく Blogger に追加しました。

それは確かに "さり気ない" ( = とっても小さい) ボタンですが、ページの先頭であっても常に表示されたままで、且つページの先頭へ戻ると URL の末尾に「 # 」が付く仕様でした。

そこで改めて、Web Designer Wall の Animated Scroll to Top を参考に、"ページの先頭からある程度スクロールしたらフェードインで表示されて、ページの先頭へ戻るとフェードアウトで非表示になり、且つページの先頭に戻っても URL が変わらない" ページの先頭へ戻るボタンを追加してみました。

手順は、次のとおりです。

[テンプレート > HTML の編集] 画面を開き、次の文字列を検索する。
※[ウィジェットのテンプレートを展開] にチェックを入れない。
```
</head>
```

1. で検索した文字列の前に次のコードを追加する。

<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){
 // hide #back-top first
 $(&quot;#back-top&quot;).hide();
 // fade in #back-top
 $(function () {
  $(window).scroll(function () {
   if ($(this).scrollTop() &gt; 1500) {
    $(&#39;#back-top&#39;).fadeIn();
   } else {
    $(&#39;#back-top&#39;).fadeOut();
   }
  });
  // scroll body to 0px on click
  $(&#39;#back-top a&#39;).click(function () {
   $(&#39;body,html&#39;).animate({
    scrollTop: 0
   }, 400);
   return false;
  });
 });
});
</script>

9行目の数値 (1500) で、ボタンがフェードイン/アウトするスクロール量をページ上端からの距離 (単位: ピクセル) で指定します。
19行目の数値 (400) で、ページの先頭へ戻る (スクロールする) 速度を指定します。
※数値が小さい = 早い

次の文字列を検索する。
```
]]></b:skin>
```
3. で検索した文字列の前に次のコードを追加する。
```
#back-top a {
  position: fixed;
  bottom: 16px;
  right: 16px;
  font-size: 1.6em;
  line-height: 0.7em;
  text-align: center;
  padding: 0 0.36em 0.36em;
}
```
ボタンの表示位置をページ右下から余白16pxに固定します。
line-height が1em以下の理由は、次の次 6. にて。
次の文字列を検索する。
```
</body>
```
5. で検索した文字列の前に次のコードを追加する。
```

 <a href='#top'>&#8212; &#9650;</a>

```
尚、ボタン画像の替わりに、テキストで記号の「— (—)」と「▲ (▲)」を改行して縦に並べて表示させています。
というわけで、4. にて line-height が1em以下だったのは、「—」を「▲」の上端に近づけるためでした。
[テンプレートを保存] ボタンをクリックする。