【最短1行で導入できる】smooth-scroll.jsの使い方

メニューを押すと、指定したセクションまで
ぐいーんと移動してくれるナビゲーションってありますよね。

CSSのIDのみでも場所を瞬間的に移動させることはできますが、
移動中のアニメーションがあると、
より「移動している」かんじが伝わりやすいのではないでしょうか。

今回はJavaScriptのライブラリである
smooth-scroll.jsの使い方を紹介してみたいと思います。

今回はこんなかんじのデモを作ってみました。
ナビゲーションのメニューを押すと、アニメーションしながらセクションを移動します。

See the Pen
eYNwPym by notebook (@orange-notebook)
on CodePen.

smooth-scroll.jsの使い方の手順は下記のようなかんじです。

手順1：Githubからファイルをダウンロードor CDNを取得

Githubページに行くと、
ファイルのダウンロード、CDNどちらも対応可能になっています。

いずれかを取得し、ファイルかCDNを読み込ませます。

手順2：HTMLのアンカータグで移動場所を指定

HTMLのアンカータグを使って移動場所を指定します。

デモでは、各セクションタグにidをふって、
ナビゲーションのアンカータグでセクションのidと紐づけています。

<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#service">Service</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

<section id="home">
    <h2>Home</h2>
</section>

<section id="about">
    <h2>About</h2>
</section>

<section id="service">
    <h2>Service</h2>
</section>

<section id="contact">
    <h2>Contact</h2>
</section>

手順3：JavaScriptでsmooth-scrollを発火

smooth-scroll.jsを発火させるには、以下1行のJavaScriptの記述をするだけです。
簡単にできてすごいですね。

var scroll = new SmoothScroll('a[href*="#"]');

(‘a[href*=”#”‘]’)の部分は、自分のHTML構造に合わせて適宜修正します。

デモではナビゲーションを
headerタグ→navタグ→ulタグ→liタグ→aタグの階層で書いているので、

var scroll = new SmoothScroll('header nav ul li a[href*="#"];

としています。

以上、smooth-scroll.jsの使い方でした。

https://orange-log.com/scroll-top/