![](https://cxg-design.jp/wp-content/uploads/2024/02/scrollblogthumb.png)
Page scroll to idでページ内スクロールを実装
ランディングページなどの縦長のページでは、目的の情報の場所までスクロールするのが大変な時があります。
今回は、プラグイン「Page scroll to id」でボタンを押したら目的地まで、スクロールアニメーションで移動するページを作成します。
![](https://cxg-design.jp/wp-content/uploads/2024/02/6151d47249c0980dde0a2e2d1aaf19e0.png)
出典 : Page scroll to id
今回のDEMOは、A〜Fまでのボタンがあり、ボタンを押すとそれぞれのブロックの先頭までスクロールしてくれます。
3カラムを2段並べてボタンを作成しました。SPでは、縦に並びます。それぞれの内容は、カバーブロックを「カバー画像の最小の高さ」縦85VHで作成しています。
![](https://cxg-design.jp/wp-content/uploads/2024/02/724f7fba432577c3143f2828f8201baf.png)
3カラムを2段並べてボタンを作成
![](https://cxg-design.jp/wp-content/uploads/2024/02/d71643252dbcdb1bc3a4e0fa57ba7c39.png)
カバーブロックを「カバー画像の最小の高さ」縦85VHで作成
設定
では、スクロールの設定をします。まず、Page scroll to idの設定ページから、スクロール時間などの設定をします。ダッシュボード、左サイドバーの設定>Page scroll to idをクリックすると設定画面が表示されます。
時間は、1秒にしたいので1000にします。「Scroll type/easing」は、デフォルトのままeaseInOutQuint / easeOutQuintにしてます。「変更を保存」ボタンをクリックして保存します。
![](https://cxg-design.jp/wp-content/uploads/2024/02/ac8bc32e7a503a296448d1febf424c27.png)
設定>Page scroll to idをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/02/753a2c7188944c3e72486e246ad3fbc4.png)
「Scroll duration」を1000millisecondに設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/02/2e1e7fdc02144dcab76583f622683e62.png)
「変更を保存」ボタンをクリックして保存
項目 | 設定値 |
---|---|
Scroll duration | 1000millisecond |
Scroll type/easing | easeInOutQuint / easeOutQuint |
Offset | 0pixels |
設置
ブロックエディター編集画面より、設置していきます。まず、移動地点にidの設定をします。今回は、アルファベットA〜Fに合わせて、「area-a」〜 「area-f」を設定します。
Aのカバーブロックの上に「Page scroll to id target」ブロックを挿入します。テキストボックスにid名「area-a」を入力します。その他のアルファベットのidも設定していきます。
![](https://cxg-design.jp/wp-content/uploads/2024/02/368091f9cd02c2db69ef4366a69229f8.png)
Aのカバーブロックの上に「Page scroll to id target」ブロックを挿入
![](https://cxg-design.jp/wp-content/uploads/2024/02/8f0759007b64617b8bf4d7a8cc058153.png)
テキストボックスに、id名「area-a」を入力。
![](https://cxg-design.jp/wp-content/uploads/2024/02/d5e2ac8ac51c0b0489ab15390f008c13.png)
その他のアルファベットのidも設定
次にボタンのリンクを設定します。ブロックをクリックし、リンクをクリックし、テキストボックスに「# + id名」を入力します。例えば、Aは「#area-a」です。その他のボタンにもリンクを設定していきます。これでページ内スクロールの設定終了です。
![](https://cxg-design.jp/wp-content/uploads/2024/02/f8ac7567279dc4ac3a98a624f756a7bd.png)
ボタンのリンクに「# + id名」を入力
![](https://cxg-design.jp/wp-content/uploads/2024/02/8e08873a9283540f6747d729a15c584b.png)
その他のボタンもリンクを設定
以上で、Page scroll to idでページ内スクロール実装の説明は終了です。簡単に設定できるので、縦長の情報が多いランディングページ等で有効に使えそうですね。Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。