JavaScriptでスムーズスクロールを実装する

ページ内リンクでページトップに戻る時に、スクロールがなめらかだとユーザーが違うページにジャンプしたと勘違いしなくてすみます。
このスムーズスクロールをJavaScriptで実装する方法を紹介します。

jQueryを使う方法

jQueryを他にも使っているなら、animate()を使ってスムーズスクロールが実装できます。

【記事執筆時の確認環境】
jQuery 1.11.0

以下はそのコードですが、#で始まるアンカーをクリックした時に動作するようになっています。

JavaScriptのメソッドだけを使う方法

jQueryを使わず、JavaScriptのメソッドだけを使う方法です。

以下のコードを記述したjsファイルをインクルードします。

HTMLのリンクコードは以下のように記述します。

スポンサーリンク

ページの先頭へ