ページ内リンクをjQueryでスムーズにスクロールさせる

ページ内リンクをjQueryでスムーズにスクロールさせる

jQuery関連記事

ページ内リンクのの作り方

html

<a href="#ps1">ポジション1</a>
<h3 id="ps1">ポジション1</h3>

まず、スクロール位置を移動させたい要素(上の例だとh3)にidを振り、
ページ内リンクのトリガーとなるaタグのhref属性にh3と同じidを#ps1のように指定します。

これだけで既にページ内リンクは完成してます。
jQueryを加えてスムーズにスクロールして、さらにURLを変化させないようにしていきます。

jQueryでスムーズにスクロールさせる

JavaScript

$('a[href^=#]').click(function() {
    var speed = 400;
    var href = $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;

    $('body,html').animate({scrollTop:position}, speed, 'swing');

    return false;
});

カンタンな流れは$('a[href^=#]').click(function() {でhref属性が#で始まるaタグをクリックした場合に処理を開始します。
targetにh3要素のページトップからの位置を格納し、animateでその位置までスムーズに移動させるという流れです。

htmlのみで試してもらうとわかると思いますが、ページ内リンクの際、URLに#(ハッシュ)がついてしまいます。
それを最後のreturn false;で処理をキャンセルしてつかないようにしています。

スムーズ部分の速度のカスタム

JavaScript

var speed = 800;

速度はspeedの値で変更できます。
値はミリ秒なので1000を指定すると1秒かけて移動します。
例えば縦長の1ページサイトで
1から2のセクションに移動する場合と、
1から10のセクションに移動する移動する場合でも同じ1秒で移動します。

easing(動き方)のカスタム

JavaScript

$('body,html').animate({scrollTop:position}, speed, 'swing');

動き方は最後のswingの箇所で変更できます。
animateメソッドのeasingの中から選んで変更できます。

スクロール位置のカスタム

JavaScript

var position = target.offset().top;

スクロール位置はpositionの値で変更できます。
取得した値から加算することで加算分だけ下がった状態に、
減算することで減算分だけ上がった状態にできます。
ナビゲーションバーが固定の場合などナビゲーションの高さ分だけ減算することで重ならずに表示できます。