コピペでOK!FC2ブログ ページ内リンクをスムーズスクロール

スムーズスクロールTOP

最近はブログやホームページでのスムーズスクロールはどんなページでも見かけるようになりましたね。

わたしが使っているFC2ブログでも上へ戻るスムーズスクロールは実装していたんですが、ページ内のリンクをスムーズにスクロールすることはしていなかったので、今回はページ内のリンクをクリックしたときに滑らかに移動させてみよう。

Sponsored Links

スムーズスクロールとは

スムーズスクロールとはページ内アンカーに滑らかにスクロールして移動する演出のことです。

最近ではページ内リンクを飛ばす際には当たり前のようにブログやホームページに実装されていますね。

 

 

FC2ブログにページ内リンクをスムーズスクロールさせる方法

HTML

head内でjQueryを呼び出しましょう。

※すでにjQueryを呼び出してる場合は上記は必要ありません。

 

続いて、<head>~</head>内に下記のスクリプトを書きましょう。

 

var speed = 500; のところは、スクロール移動時の速度を指定できます。

数字が大きくなるほど、ゆっくり動きます。これで、ページ内のリンクであればスムーズスクロールしてくれます。

お疲れ様でした。

Sponsored Links

SNSでもご購読できます。

コメントを残す

*

CAPTCHA