jQueryで「ページトップへ戻るボタン」をフェイドインで出現させるソースを、本サイトでも使用した。
ただ、ページスクロールの部分は、別に用意したjavaScriptを組み合わせたので、参考ソースから少し書き換えさせてもらった。
また、CSSの「transition」プロパティを同時に使うと、フェイドイン・フェイドアウトが効かなくなる発見もあったのでメモ。

• フェイドイン・フェイドアウトの javaScriptソース
• ページスクロールのための javaScriptソース
• HTMLはこのように
• CSSの「transition」は共存不可

フェイドインで表示させる javaScriptソース

まず、参考にさせていただいたソースはこちら：
jQueryでスクロールすると表示する系いろいろ | webOpixel

こちらの“1 .ちょっとスクロールしたら「トップへ戻るボタン」を表示”を使わせていただいた。
ただ、スクロールの部分は別のモノを使いたかったので、フェイドイン・フェイドアウトの部分だけ使用。

$(function() {
	var topBtn = $('#pageTop');	//idは自分のサイトに合わせて変更
	topBtn.hide();
	$(window).scroll(function () {
		if ($(this).scrollTop() > 200) { //トップから200pxにした
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});
});

ページスクロールのための javaScriptソース

ページスクロールのためのpagescroll.jsは、ずいぶん前（7年前？）にいただいて自分でアレンジしたものだが、参考元を控えておらず、わからなくなってしまいました。（自分で書いたはず無い。笑）

これは「# ハッシュ」（=id）を付けたページ内リンクのすべてに対してスクロール。
「トップへ戻るボタン」ボタンだけでなく、ページ内の「a href=”#○○○”」と指定したリンクすべてにスクロールする。

$(function(){
  $('a[href^=#]').click(function(){
    var Hash = $(this.hash);
    var HashOffset = $(Hash).offset().top;
    $('html,body').animate({
    scrollTop: HashOffset
    }, 800); //スクロールのミリ秒。1000=1秒ね
    return false;
  });
});

HTMLはこのように

</body>の直前に、jsで指定したidの要素を置くのが通常の配置。
このブログでは、背景にcanvasを使っている都合上、コンテンツ全体をcanvasの上に乗っけている要素（div#contents-wrap）の終了タグの直前に入れた。
リンク先も div#contents-wrap（の先頭タグ）にしておいた。

<div id="pageTop"><a href="#contents-wrap">^</a></div>
</div><!--contents-wrap END-->
</body>

ここでは、ボタンは「^」のテキストのみ。これをCSSで装飾している。

CSSの「transition」は共存不可

CSSは下記のように指定している。
ほとんど装飾用だが、大事なのは2〜4行目の「position:fixed」の指定。ボタンをウィンドウの特定の位置に固定させておくこと。
これさえやっておけば、あとはjsのほうで出現させたり消したりしてくれる。

#pageTop{
	position:fixed;
	right:20px;
	bottom:20px;
	text-align:center;
	background:rgba(45,20,151,0.5);
	border-radius:25px;
	border:solid 2px rgba(255,255,255,0.5);}
#pageTop:hover{
	background:rgba(253,92,229,0.7);}
#pageTop a{
	color:#fff;
	font-size:200%;
	line-height:1em;
	padding:0.4em 0.5em 0;
	text-decoration:none;
	display:block;
	cursor:pointer;}

当初、8行目のあとに「transition : all 0.3s」を指定していた。
これはボタンにマウスオーバーで色が変わる時、時間をかけてふんわり変化するように指定したものだが、これがあると、jsのフェイドイン・フェイドアウトが無効に。（パッと出て、ピッと消える！）
フェイドインとマウスオーバー時の変化と、どっちを取るか。答えはフェイドイン。というわけでCSSの transitionを削除した。