アンカーリンクを滑らかに移動 スムーススクロール jQuery

2017年11月21日
  • 下記のスクリプトを内に記述するだけで、アンカーを使って滑らかにページ内移動させる事ができます。

    リンクをhtmlに記述

    ページ内リンク(アンカー)の場合は、#を先頭に記述し、後に任意の名前を付ければOKです。ただし、基本数字からの記述はダメなので英単語(ローマ字)などで記述します。

    飛び先をhtmlに記述

    htmlのスクロール先の先頭に下記のタグを記述します。通常のリンクタグでも構いません。

    <head>内に記述するスクリプト

    <head>内に下記のスクリプトを記述します。基本これだけでスムーススクロールを実装する事がでます。近年主流になっている縦長のリッチコンテンツを作る時にも重宝します。