taro
ビューンってページ内を移動させたいな
なんかいい方法ないかな～
smooth-scroll.jsを使えば実装可能です。ほとんどのwebサイトで使われていると思います。これを使えば今風のサイトが作れます。
smooth-scroll.jsのダウンロードから使い方を解説していきます。
まずは、完成品から、お問い合わせボタンを押すとビューンって移動します
↓ボタンも移動します
下記のボタンを押してください
smooth-scroll.js使い方
- GitHubからフォルダをダウンロード
- HTMLでフォルダを読み込む
- smooth-scroll.jsを使うためにjavascriptを書く
- 押すボタンに指定 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を追加します。
まとめ
これでできると思います。
間違いなどありましたらコメントよろしくお願いします。
オンラインでの運動指導もやっているので肩こり、腰、膝気になる方は下のリンクから相談してみてください！
オンライン運動指導 申し込み
オンライン運動指導の申し込みありがとうございます。運動指導する前に、安全に運動するため、身体の状態を確認させて頂きます。
よろしくお願い致します。
docs.google.com
また理学療法士の人は、自分の運動療法の引き出しを増やすという視点でも自分自身が受けてみるのもオススメです！
コメント