スムーズスクロール

ページ内のリンクをクリックしたとき、スムーズにスクロールする機能です。(Ver. 1.2.1より)
通常のHTMLのアンカーリンクでのページ内移動では瞬間的に移動しますが、この設定をおこなうとスクロールのスピードを徐々に変化させることができるため、ページ内のどこに移動したのか閲覧者が認識しやすくなります。

例えば、Webページの上部に移動させる「ページの先頭へ戻る」というアンカーリンクや、ページ内の任意の項目に移動させるアンカーリンクで使用できます。※ページ内の任意の項目に移動させるのはVer. 1.5.x以上からになります。

飛び先判定

アンカーリンクは「#hoge」のようなリンクになりますが、飛び先になる要素は「id属性」もしくは「name属性」で設定した要素になります。

<section id="hoge"> <!-- id属性で指定 -->

<form name="hoge" method="post"> <!-- name属性で指定 -->

デフォルトの設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて:設定を編集する」を参照してください。

scrollToMark: 'a.scrollTo', 
scrollToI: 40,
scrollToV: 0.5,


scrollToMark セレクタのアンカーをクリックするとhref属性のフラグに指定された要素へスクロールします。
scrollToI 間隔(i)msec
scrollToV 0 < 移動量(v) < 1

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、別途作成したJSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.scrollToMark    = 'a.js-scrollTo';
  ACMS.Config.scrollToI       = 40;
  ACMS.Config.scrollToV       = 0.5;
});

デモ

ページの先頭へ