Page scroll to idでページ内スクロールを実装

ランディングページなどの縦長のページでは、目的の情報の場所までスクロールするのが大変な時があります。

今回は、プラグイン「Page scroll to id」でボタンを押したら目的地まで、スクロールアニメーションで移動するページを作成します。

3カラムを2段並べてボタンを作成しました。SPでは、縦に並びます。それぞれの内容は、カバーブロックを「カバー画像の最小の高さ」縦85VHで作成しています。

設定

では、スクロールの設定をします。まず、Page scroll to idの設定ページから、スクロール時間などの設定をします。ダッシュボード、左サイドバーの設定＞Page scroll to idをクリックすると設定画面が表示されます。

時間は、1秒にしたいので1000にします。「Scroll type/easing」は、デフォルトのままeaseInOutQuint / easeOutQuintにしてます。「変更を保存」ボタンをクリックして保存します。

項目	設定値
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も設定していきます。

次にボタンのリンクを設定します。ブロックをクリックし、リンクをクリックし、テキストボックスに「# + id名」を入力します。例えば、Aは「#area-a」です。その他のボタンにもリンクを設定していきます。これでページ内スクロールの設定終了です。

以上で、Page scroll to idでページ内スクロール実装の説明は終了です。簡単に設定できるので、縦長の情報が多いランディングページ等で有効に使えそうですね。Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。