http://webdesign-dackel.com/2015/12/17/sweet-scroll/
のことから使わない理由がみつかりません。おすすめです。
単独で使用するには
<script src="sweet-scroll.min.js"></script>
で読み込んで
const sweetScroll = new SweetScroll({
});
で、実行。簡単です。
オプションも豊富です
{
trigger: "[data-scroll]", // トリガーとなる要素をCSSセレクタで指定
header: "[data-scroll-header]", // 固定ヘッダをCSSセレクタで指定
duration: 1000, // アニメーション再生時間のミリ秒
delay: 0, // アニメーション開始までの遅延ミリ秒
easing: "easeOutQuint", // イージングのタイプ
offset: 0, // スクロール位置のオフセット
verticalScroll: true, // 垂直方向のスクロールを許可
horizontalScroll: false, // 水平方向のスクロールを許可 (デフォルトでは無効)
stopScroll: true, // ホイール・タッチイベントが発生した時にスクロールを停止
// call back function
beforeScroll: null, // スクロールが始まる前 (return falseでキャンセル可)
afterScroll: null, // スクロールが終わった時
cancelScroll: null // スクロールがキャンセルされた時
}