ページ内リンクでスムーズスクロール

アンカーリンクをクリックするとページ内をするするっとスクロールするHPよくありますよね。

メニューアンカーウィジェット(Menu Anchor)を使えば簡単にさくさくっと作れます。

まずはサンプルをご確認ください。
https://elecre.net/smoothscroll/

上部に配置したリンクをクリックすると指定の位置へスクロールします。
テキストリンクのURL欄には次のように#n1とか#n2、#n3とか#(ハッシュタグ)をつけて指定の文字を入力します。

ページ内のスクロールさせたい場所へメニューアンカーウィジェット(Menu Anchor)をドラッグして入れます。メニューアンカーのIDの箇所にさきほど指定した#n1などの#をとったn1を入力します。

縦に長いページでないとスクロールした感じが出ないため、各セクションの間をスペーサーウィジェットを入れています。

Elementorカテゴリ

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.