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

javascript
taro
taro

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

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

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

smooth-scroll.js使い方

  1. GitHubからフォルダをダウンロード
  2. HTMLでフォルダを読み込む
  3. smooth-scroll.jsを使うためにjavascriptを書く
  4. 押すボタンに指定 data-scrollを付ける 行先を指定 href=,,,,

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

GitHubからフォルダをダウンロード

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

HTMLでフォルダを読み込む

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

<p>テスト</p>

コピーされました

smooth-scroll.jsを使うためにjavascriptを書く

見本

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

押すボタンに指定

見本

<p>テスト</p>

コピーされました

POINT
  • 行先をIDで指定(#●●)
  • data-scrollつける
  • TOPに戻る場合は、#で指定(バグが起こるため)

ヘッダー分を考慮してスムーススクロール

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

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

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

javascriptを書き直します。

見本

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

headerにdata-scroll-headerを追加

見本

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

コピーされました

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

まとめ

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

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

コメント