jQueryなしで作るsmooth-scroll.js(ページ内移動)

taro

ビューンってページ内を移動させたいな
なんかいい方法ないかな～

smooth-scroll.jsを使えば実装可能です。ほとんどのwebサイトで使われていると思います。これを使えば今風のサイトが作れます。
smooth-scroll.jsのダウンロードから使い方を解説していきます。

まずは、完成品から、お問い合わせボタンを押すとビューンって移動します
↓ボタンも移動します
下記のボタンを押してください

smooth-scroll.js使い方

上記の手順でやっていけば、できると思います。
解説していきます。

軽量ですぐにダウンロードできると思います。
使うのは、distの中にあるsmooth-scroll.polyfills.min.jsのみです。minだと圧縮されてますね。

見本（パスはご自身の環境に合わせてください）

<p>テスト</p>

コピーされました

見本

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

見本

<p>テスト</p>

コピーされました

POINT

今のままでは、ヘッダーを固定している場合は、移動先の内容とかぶってしまいます。

その場合は、以下の方法を使えば、

ヘッダー分の幅を考慮してスムーススクロール可能です

見本

<script> var scroll = new SmoothScroll('a[href*="#"]', { header: '#header', });</script>

見本

<header data-scroll-header> header内容 </header>

コピーされました

固定してあるヘッダーにdata-scroll-headerを追加します。

これでできると思います。

間違いなどありましたらコメントよろしくお願いします。

この度、udemyで講座を新しく公開しました。どうやって臨床思考や運動指導の方法など学べる講座です。

特に腰痛の方に対してどんな運動をしたら、よいのか悩んでいる方、運動指導中の声かけについて悩んでいる方にオススメです。

8月中まで限定で無料とさせて頂きます。ぜひ見て登録してください。参考になればレビューを書いて頂けると嬉しいです。