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

 

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

 

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

 

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

 

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

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

 

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

 

HTMLサンプル

 

【STEP2】スクロール移動させるjQueryプログラムの記述

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

 

「animate」関数の使い方

 

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

 

【STEP1】で作成したページ内リンクをスムーススクロールさせる記述は以下の通りです。

 

aたぐでID指定のページ内リンクへ遷移したときにスムーススクロールさせる記述

 

【応用編】ページトップへスクロール移動させるサンプルプログラム

 

以下は、「ページトップ」リンクをクリックされた時に、スクロールで移動するサンプルプログラムです。

 

HTML

CSS

jQuery

 

 

おすすめの記事