ページ内リンクをスムーススクロールで移動させる２ステップ

2017年6月7日

ページ内リンクを使う時に一瞬でリンク先に飛んでしまうと、サイトのデザインコンセプトに合わない場合があります。

そんな時は、スクロール移動させると良いでしょう。

これができると、ふんわり優しいサイトデザインなら、ゆっくり優しくスクロール移動したり、ポップなデザインなら少しアップテンポにスクロール移動させたりと、デザインの幅が広がります。

ここでは、ページ内リンクをスムーススクロールで移動させるエフェクトの作り方を見ていきましょう。

【STEP1】ページ内リンクを作る

まずは、スムーススクロール先となるページ内リンクを作っていきます。

ページ内リンクは、ユニークなIDを付与した要素をaタグのリンク先として指定することで、その要素のトップ位置に遷移することができます。
以下は、リンクAエリア、リンクBエリアのページ内リンクへジャンプするサンプルプログラムです。

HTMLサンプル

スクロール移動を実現するためには、jQueryの「animate」関数を使用します。

「animate」関数の使い方

params	変化させたい要素のプロパティ名。スクロールイベントの場合は"html,body"を指定します。
duration	アニメーションの動作時間。ミリ秒指定または"slow","nomal","fast"を指定します。
easing	イージング関数（アニメーションの種類）を指定します。デフォルトでは"linear"（一定速度）,"swing"（ゆっくり→早く→ゆっくり）が利用できます。
callback	アニメーション完了時に実行する関数を指定します。