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

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

jQueryを使う方法

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

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

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

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

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

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

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

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ