長いページも読みやすく！ページ内の指定した場所にジャンプさせる方法

ブログを書いていると、時にはとても縦に長くなってしまう場合があります。

例えば、先日書いた記事
総計290個以上掲載！iPhoneアプリのURLスキーム一覧
は、アプリのアルファベット順にURLスキームを並べているのですが、下図のようなアルファベット&ひらがなのリンクを設置することで、目的のアプリのURLスキームにページ内ジャンプし、素早くたどり着けるようにしています。

このようにページ内の好きな場所にジャンプさせる方法を紹介したいと思います。

スポンサーリンク

スポンサーリンク

ページ内ジャンプを実装する方法

●目次のHTMLタグ

<A HREF="#agyou">あ行</A>

ここでは、わかりやすいように「あ行」の目次を表示する方法を紹介します。「あ行」は画面に表示する文字列、そしてこれを、<A HREF="#･･･">～</A>で囲みます。
･･･の部分は文字列で好きに決めて構いません。ここでは「agyou」としました。

●ジャンプ先のHTMLタグ

<A NAME="agyou">あ行</A>

ジャンプ先のタグも同様に「あ行」は画面に表示する文字列、そしてこれを<A NAME="...">～</A>で囲みます。
･･･の部分は、先ほどと同じ文字列にします。つまり、「agyou」ですね。そして今度は「agyou」の前に#がないので注意してください。

これで長いページの場合でも、指定した場所に一瞬で移動することが出来るようになります。