l_side bar ------
面倒なのでこのカラムは空
Access Counter:  総アクセス数

リンクのジャンプ先の表示をページ上端にしない方法


忘れっぽい男の私的メモ:

ヘッダー固定のページで、ページ内リンク(アンカー)がヘッダーの影に隠れないようにする 2つの方法
通常、ページトップ~途中に アンカー <a name=""> でページ内リンクを設定し、そのリンク先にジャンプするとそのリンク先はページトップに表示される。
しかしこのページのように、Headerブロックを固定している場合は、そのジャンプ先はページトップに表示されると Headerブロックの下に隠れてしまう。

例えば ここをクリックするとリンク指定先(#10)は Headerの背後に表示されるが ここをクリックするとヘッダーの下に表示される。あるいは ここをクリックしても隠れない。

方法1

アンカーは < a name="LINK"> の代わりに ブロック要素に <p id="LINK" class="pd35"> などと ブロック要素の idにアンカー名を、スタイルシートで下記のようなマイナスマージンと同量のパッディングを指定したセレクタを追加する。
マージン、パディングの値は適宜変更する。
リンクの指定は 普通に <a href="#LINK" target="" > クリック </a>  とする。

     .pd35{
       margin-top: -35px;
       padding-top: 35px;
     }
 方法2

空の <span id="LINK" class="uhd"> </span> を指定してスタイルシートには下記のようなセレクタを追加する。
(<span>   </span> の中に表示を入れると、その表示は top:○px 分だけ上にずれて表示されるので注意が必要)
<a>タグと同じようにブロック要素の途中にもジャンプ先を指定でき、ジャンプ先が無理に改行されないので汎用性がある。

     .uhd{
       position: relative;
       top: -35px;
       display: block;
     }

1 へ  5 へ  15 へ  25 へ  35 へ  
20 へ: <a > タグに id="LINK" を追加して、 class="pd35 uhd" を指定した例: 何故か改行が入り、ジャンプ先表示も下にずれる。pd35/uhd 片方だけだと隠れてしまう。

0 1
2
3
4
5
6
7
8
9

10  ここが途中リンク位置
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50



















ブロック要素 <p> を使った例:
例えば <0 へ>をクリックするとリンク指定先は Headerの背後に表示されるが <0 へ>をクリックするとヘッダーの下に表示される インライン要素 <span> を使った例:
1 へ  5 へ  15 へ  25 へ  35 へ  


作ってから気づいた。過去にも 同じようなページを作っていた   (´・ω・`;;;)

contents end contents end   to top   to middle

r_side bar

面倒なのでこのカラムは空