当ブログのコンテンツ・情報について、できる限り正確な情報を提供するように努めておりますが、正確性や安全性を保証するものではありません。情報が古くなっていることもございます。
当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。
【SWELL】特定位置までスクロールで移動するリンクの作成方法
目次の見出しをクリックすると、本文中の見出しの位置までスクロールで移動すると思います。このような「クリックで特定位置までスクロールで移動するリンク」をSWELLで作成する紹介します。
目次
動作イメージ
特定位置までスクロールで移動するリンクの作成方法
STEP
HTMLアンカーを設定
スクロールの移動先にHTMLアンカーを設定します。
「移動先のブロックを選択」→「高度な設定」→「HTMLアンカー」に任意の文字列を入力します。ここでは「shita」と入力しています。
shita
HTMLアンカーに使える文字
HTMLアンカーには半角英数字だけでなく、ほとんどの記号や日本語も使用できます。ただし、スペース(半角/全角)は使用できません。
とはいえ、実際には半角英数字、ハイフン(-)、アンダースコア(_)のみを使用したほうが良いでしょう。
HTMLアンカーに使用しないほうが良い文字列
見出しには自動的にHTMLアンカーが設定されます(目次をクリックすると見出しまでスクロールするのはこのためです)。
見出しのHTMLアンカーは「index_id0」「index_id1」「index_id2」……となります。見出しと同じHTMLアンカーを付けてしまうと、誤作動の原因になるので使用しないほうが良いでしょう。
STEP
HTMLリンクを設定
通常のリンク作成と同じようにリンクを作成します。URLには「#」と「先程設定したHTMLアンカー」を設定します。今回はHTMLアンカーを「shita」としたので、「#shita」になります。
#shita
以上で完了です。