こんにちはjunです。どちらかというとメモ的な内容になります。このサイトの「目次」にも実装されているような、見出し名をクリックするとそのコンテンツが書いてある場所まで飛ぶ動きを実装させます。
この自動スクロールの原理について解説します。
$('a[href^=#]').on('click',function() {
// スクロールの速度
var speed = 400; // ミリ秒
// アンカーの値取得（aタグのhref属性）
var href= $(this).attr("href");
// 移動先の要素を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先の高さを取得
var position = target.offset().top;
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
});
aタグのhref属性の文字列[href=”#hoge”]と移動先の要素にID<div id=”hoge”></div>とさせることでこのスクロールができます。
しかし、原理的に必要なものは
どの場所に飛ばすかの情報を持ったトリガー（今回のaタグ） 自身の場所を示すページ内で一意のIDをもつクラスまたはID があれば可能です。しかし後述する理由よりできたらページスイングはaタグで行い、IDで区別する方法が中規模以上のサイトでは便利です。
今回のスクロールではトリガーとなるaタグをクリックすると、urlに「#hoge」というのが付きます。実はurlに#がつくと、
そのurlつまり、そのページ内におけるDOMと#以降の文字列に合致する要素に飛ばしてくれます。実はJSがなくても自動スクロースができます。ただしアニメーションもなく画面が一瞬で切り替わるので、味気っぽなさはあります。
js(jquery)ではアニメーションを実装したいので書いただけです。
#を用いて移動先の要素を取得してアニメーションを実装すると、「url+#」でアクセスしたときにもアニメーションスクロールが効くように改変が可能になります。
今回はその実装はありませんが、Webにそのわっている機能を下地にスクリプトを書いた方が、独自のスクリプトより拡張性が高くなります。