urlパラメータ渡しをページ内リンクで適用する方法

以前の記事でHTMLリンクでパラメータ渡しについて紹介しましたが、今回は同一ページ内でのページ内リンクでパラメータを渡す方法について承知していきたいと思います。

HTMLリンクのパラメータ渡しについて先に知りたい方は、下記記事をお読みください。
↓↓↓↓

ページ内リンクとパラメータ渡し

HTMLのアンカーリンクでページ内リンクをする場合、下記のようになります。

<a href="#hoge"></a>

そこにパラメータを付けていきます。
まず間違えた記述から紹介します。

<a href="#hoge?color=red"></a>

上記はID + パラメータの順番になっていますが、この記述は間違えであります。

ページ内リンクでパラメータを渡す場合には、下記のようになります。

<a href="?color=red#hoge"></a>

正しい記述の仕方は、先にパラメータを記述し、末尾にIDを記述します。
また複数のパラメータの値を渡したい場合は、下記のように&を記述して繋げていきます。

<a href="?color=red&size=middle#hoge"></a>

リンクの記述に違和感を感じるかもしれませんが、逆ということで覚えていただければと思います。

urlパラメータ渡しをページ内リンクで適用する方法まとめ

urlパラメータ渡しをページ内リンクで適用する方法について紹介してきました。
LPサイトなどの1ページ構成のサイトで活用できるので、サイトを使いやすくするための工夫として利用していただければと思います。

HTMLリンクのパラメータ渡しについて知りたい方は、下記の記事を参考にしてください。

おすすめの記事