【jQuery】「トップへ戻る」ボタン付き！するすると動くアンカーリンク

#私はするするするやつ（スムーススクロール）が好きです。
ほしい機能をすべて搭載している都合のいいjQueryの過去記事を見つけられず
勉強ついでに個々の機能をがっちゃんこしてみようと思い立つ。
めっちゃ調べたけど最終的に成功したのでメモ。

##1. 欲しい機能
1.「トップへ戻る」ボタンのするするなやつ
2.目次のアンカーリンクがするするなやつ

##2. とりあえず調べる
私がやりたい雰囲気の記事を発見しました。この調べたら見つかる感じ、ほんと皆様に感謝です。
「トップへ戻る」ボタン⇒jQueryでスクロールすると表示する系いろいろ の、一番目
するするなアンカーリンク⇒【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript

##3. できたやつ
「トップへ戻る」ボタンのHTMLとCSS

html

<p class="pagetop">
<a href="#osusumeTemplate"><span>TOPへ<br>もどる</span></a>
</p>

css

.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 15px;
}
.pagetop a {
    display: block;
    background:#aaa;
	opacity: 0.6;
    text-align: center;
    color: #222;
	font-weight: bold;
    font-size: 12px;
    text-decoration: none;
	filter:alpha(opacity=50);
	width:80px;
	height:80px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	border-radius: 40px;	/* 横幅&高さの1/2 */
	position: relative;
}
.pagetop a span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
#osusumeTemplate .pagetop a:hover {
    display: block;
    background-color: #222;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
	filter:alpha(opacity=50);
}

「トップへ戻る」とアンカーリンクのjquery

jQuery

$(function () {
	var $pageTop = $(".pagetop")
	$pageTop.hide();
	$(window).scroll(function () {
		if ($(this).scrollTop() > 500) {
			$pageTop.fadeIn();
		} else {
			$pageTop.fadeOut();
		}
	});
	$('a[href^="#"]').click(function () {
		var href = $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({
			scrollTop: position
		}, 500, "swing");
		return false;
	});
});

##4. 機能をがっちゃんこするために調べた詳しい解説
…慣れたらなんの変哲もない記述なんでしょうが、私にはよくわからない文字がいっぱい。
色々細かく調べた結果、ようやっと書いてある内容がわかってがっちゃんこできました。
せっかくなのでその調べた内容で解説。
お前そんなことも知らなかったのかという突っ込みはなしでお願いします。

var $pageTop = $(".pagetop")
$pageTop.hide();

初期設定。
$(".pagetop")に$pageTopというニックネームをつけます！
.pagetopは好きな名前に変えられます。

$pageTop.hide(); ←最初はhideしてるよ

$(window).scroll(function () {
        if ($(this).scrollTop() > 500) {
            $pageTop.fadeIn();
        } else {
            $pageTop.fadeOut();
        }
    });	

ブラウザ（=window）をスクロールしたら中のやつをアクション。
もしスクロールが500（ピクセル？）以上行ったらボタンをフェードインで表示。500以下になったらフェードアウトで非表示。

###【「.scroll()」と「.scrollTop()」と「.offset()」の違い】
⇒.scroll()：文書がスクロールされた際に呼び出される。なのでスクロールできないほど短い距離では何も起きない。
⇒.scrollTop()：スクロールバーのスクロール位置を取得する。なのでスクロールできないほど短い距離では何も起きない。
⇒.offset()：ウインドウの左上を0として、指定したドキュメントの左上の位置を取得する
jQueryのoffset().topとscrollTop()の違いについて | たくおのーと

$('a[href^="#"]').click(function () {

'a[href^="#"]'の「＃」は、ダブルクォーテーションかシングルクォーテーションで囲まないとエラーになるよ
〇^="□" ：□から始まる要素を持っている〇（属性）
つまり今回は「＃」から始まるhref属性！

var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;

このクリックアクションに関する初期設定。
.attr() ⇒ 指定した属性の値を取得する

条件式 ? 式1 : 式2 ⇒ 条件演算子(三項演算子)
条件式がtrueだったら式1実行！
条件式がfalseだったら式2実行！

つまり今回は「href属性が#か空欄だったらタグをぶっこむ。それ以外だったらhref（リンクかアンカーリンク）をそのまま読み込む。」
ということになる。ややこしやー

var position = target.offset().top;

指定した属性のブラウザトップからのy座標取得（つまり指定した属性の一番上の数値）

$("html, body").animate({scrollTop:position}, 500, "swing");

html or bodyタグを0として、positionの位置まで速度500でswing（加速）しながらスクロールする
この「swing」がするするの正体かっ！！

.animate() ⇒ 現在の状態から、指定された状態へ徐々に変化させていく

return false;

a要素をクリックしたときに、jsの命令を実行するけど そのリンク先（href）に飛ばないようになる

みたいな感じで理解しました まる