IT技術Labo - HouseTect

Javaフリーエンジニアとしての苦悩や、アーキテクトになるための努力の軌跡を掲載しています。.NETとJavaに力を入れた技術情報発信ブログです。

スポンサーサイト


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

リンクで同じページの所定の位置にスクロールする方法


よく見かけるのですが、ページの上のほうに目次のようなリンクがずらっと並んでいて、そのリンクをクリックすると所定の位置にスクロールするというページがあります。

これは1回のページロードですべてのHTML要素を表示しているので、リンク毎にページ遷移するより処理としてはかなり早いです。

たとえばこちらのページprototype.js の開発者向けメモ

上の説明と同じようなサイトですね!

詳細は続きで。



ここをクリック!!


























































































































































ここをクリック!!




↑の「ここをクリック!!」をクリックしてみてください。
ページがスクロールしましたね。

では実際のHTML

<a href="#click">ここをクリック!!</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h3 id="click">ここをクリック!!</h3>


このページ全体がスクロールしてしまうのはご愛嬌で!笑

単純な話ですが、<a>タグのhref属性で指定するURLに「#」を付けます。
そしてその飛び先の「id」とリンクのhrefを一致させる。

これで終わり。
スポンサーサイト



↓のボタンでこのブログの記事をランダムに表示します。

●Homeへ戻る●

COMMENT

Name
E-mail
URL
Comment
Pass  *
Secret? (管理者にだけ表示)

Pickup Link!

COUNTER



RSSの登録はこちらからどうぞ。
RSS

ブログ内の検索

Google

プロフィール

Hisasann

Author:Hisasann
かなり走り書きなブログで申し訳ないです。個人のメモ程度に使っていますが、よかったら参考にしてくださいね。メールまってま~す。

相互リンク募集しています。 下記メアドまでメールください。
Rastaman@Mixi
Rastaman@コトノハ
Rastaman@テクノラティ

アクセスランキング

ブログパーツ

ブログランキング



ブロとも申請フォーム


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。