ページ内ジャンプとは
ページ内（シングルページ等で使い勝手が良い）で更新せずにダウンスクロールで指定した要素に飛ばしてくれる機能。
⚠️下の「ここをクリック！」は画像の為実際に押せません
ヌルッと指定の要素へ⬇️
HTMLの記述
ジャンプボタン
<a href="#sample">ここをクリック！</a>
ジャンプ先(アンカー)
<h2 id="sample">これは見出しです。</h2>
コードで使い方を説明
sample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<body>
<h1>page内ジャンプの使い方</h1>
<p>
<a href="#link">クリックすると飛びます</a>
</p>
<p style="padding-top: 1000px">
<a name="link">ジャンプ先です</a>
</p>
</body>
</html>
飛ばす速度(スクロール速度)を調整する
①HTML
html
<a href='#target'>Topへ戻る</a>
②jQuery
jQuery
// ページ内リンクのみ取得します。
$('a[href^=#]').click(function(){
//デフォルトのイベントをキャンセル
event.preventDefault();
// 移動先となる要素を取得します。
var target = $(this.hash);
if (!target.length) return;
// 移動先の位置を取得します
var targetY = target.offset().top;
// animateで移動します
$('body').animate({scrollTop: targetY}, 500, 'swing');
});
速度調整
jQuery
var targetY = target.offset().top - 50;
倍速でスクロール
jQuery
$('body').animate({scrollTop: targetY}, 1000, 'swing');