JavaScript 2021.03.31

smooth-scroll.js（スムーススクロール）の使い方

備忘録。

js呼び出し

DLして自サーバーから呼び出して使っていましたが、CloudflareのCDNが利用できるので以下のように呼び出し。
<head> の書けって方もいますが、私はWordPressなどの場合は</body>の直前＝一番下に書いてます。

&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.0/smooth-scroll.min.js"&gt;&lt;/script&gt;

1	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.0/smooth-scroll.min.js"></script>

CDNが使えない環境やダウンロードして使いたいというはGithubからダウンロードしてお使いください。

あとは先ほどの読み込んだスクリプトの下に実行コードを書きます。

&lt;script>
var scroll = new SmoothScroll('a[href*="#"]', {
speedAsDuration:true,
speed:1000,
easing:'easeInOutQuint' 
});
&lt;/script>

var scroll = new SmoothScroll('a[href*="#"]', {

speedAsDuration:true,

speed:1000,

easing:'easeInOutQuint'

});

</script>

目的地となるターゲット（aや#）にdata-scrollを付け加えるだけで、スムーススクロールになります。
data-scrollを付けないとスムーススクロールは実行されないので、気をつけてくださいー