Ads by Google
新しい記事を書く事で広告が消せます。
リンクで同じページの所定の位置にスクロールする方法
よく見かけるのですが、ページの上のほうに目次のようなリンクがずらっと並んでいて、そのリンクをクリックすると所定の位置にスクロールするというページがあります。
これは１回のページロードですべての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へ戻る●
最新の記事
-
・サイト移転しました。 (05/24)
・女性と男性が購入する携帯電話の色について (05/23)
・SQL文を貼り付ければ自動でフォーマットしてくれるツール (05/19)
・アルファブロガーのインタビュー映像（NHK） (05/10)
・StrustのActionと純粋にAjax通信をさせる方法 (05/07)
・今日の夕飯は… (05/07)
・Eclipseでデバッグ時にソースが見つからない場合の対処 (05/01)
・リンクで同じページの所定の位置にスクロールする方法 (04/14)
・Oracleでは空文字とnullが一緒？ (04/11)
・2つのテーブルのスクロール位置を動機する方法 (04/10)
・Excelで指定行にジャンプする方法 (04/10)
・インライン要素とブロック要素の違い (04/04)
・ブログで使うPing送信一覧 (04/04)
・がちゃがちゃエントリー 記事ランダム表示 for FC2 (04/03)
・font-familyの使い方 (03/30)
Pickup Link！
COUNTER
RSSの登録はこちらからどうぞ。
ブログ内の検索
カテゴリー
プロフィール
Author:Hisasann
かなり走り書きなブログで申し訳ないです。個人のメモ程度に使っていますが、よかったら参考にしてくださいね。メールまってま〜す。
相互リンク募集しています。
下記メアドまでメールください。
Rastaman@Mixi
Rastaman@コトノハ
Rastaman@テクノラティ
アクセスランキング
ブログランキング
ブロとも申請フォーム
