Smooth Scroll | RADIX v4

同一ページ内へのアンカーのリンクをクリック時、自動で目標までスクロールするようにします。
条件としては、a 要素のうち、href属性値が # から始まるものについて、本来のページ遷移をキャンセルして対象 ID のエレメントまでスクロールするイベントを追加します。
# から始まるもののみが対象である為、 index.html#hoge のように、ファイル名や https:// から始まっている場合はこれに含まれません。

また、href 属性が空になっている a 要素の href は # となります。href 属性が # のみとなっている要素のスクロール先はページのトップとなります。

※css の scroll-behavior: smooth と併用すると競合して動作が不自然になります。RADIX のこの機能を用いるか css の標準の方を使うかどちらかにすることをおすすめします。

Options

const radix = new Radix({
    smoothScroll: {
        active: true,  // 機能のオン、オフ（boolean）
        duration: 800,  // スクロール終了までの時間（ミリ秒）
        easing: 'easeInOutExpo', // スクロールのイージング（イージングセレクタ）
        header: '', // 固定ヘッダーがある場合にスクロール位置を調整（CSSセレクタ）
    }
});

CSS で scroll-behavior: smooth を設定する際は active を false にしてください（競合して正常に動作しなくなるため）。

固定ヘッダーに対するスクール位置の自動調整

（v4.1.2 ~）RADIX のスクロール機能では、ページ上部に position: fixed な要素がある場合に、その要素の高さを考慮してスクロール位置を調整することができます。
この機能を使うには header オプションで対象の固定ヘッダーをCSSセレクタで指定してください。

これはこの要素が fixed されているかどうかを都度判別するため、たとえばスマホ版の表示時のみヘッダーがページスクロールに追従するようなデザインでも、PC版とスマホ版の両方で適切な位置にスクロールをさせることができます。

scroll-behavior: smooth との違い

スクロールアニメーションの設定が可能
スクロール時間の設定が可能
固定ヘッダーを考慮したスクロール位置調整が可能
適用対象を分けることが可能（id 直指定のリンクのみに適用し、フルリンクのものは同一ページ内であろうと適用しない）

Example

以下のリンクはスクロールします。
PAGETOP

以下のリンクはフルリンクなので、同じページを開きなおします（ブラウザのURL欄に# がつきます）。
https://radix.shoalwave.net/v4/javascript/smooth-scroll/#

angle_top