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


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

ヘッダー固定のページで、ページ内リンク(アンカー)がヘッダーの影に隠れないようにする 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

Access Counter:  総アクセス数


スマホが充電出来なくなる前に!  by 楽 天
充電端子は2年前後で接触不良になり充電出来なくなる可能性が !

アンドロイド用

【送料無料】充電革命 マグネット式 充電ケーブルセット マイクロUSB用 【送料無料】

価格:2,462円
(2016/12/27 22:38時点)
感想(1件)

アンドロイド用

WSKEN micro USB マグネット式 充電ケーブル アンドロイド用 スマホ 充電 マグネット ケーブル Android アンドロイド microUSB iPad 端子 コード コネクタ SPHON15-003 【1/15】

価格:3,218円
(2016/12/27 22:29時点)
感想(0件)

iPhone用

iPhone ケーブル 充電ケーブル マグネット ケーブル マグネット式充電 マグネット 磁石 アルミ合金 iPhone7Plus iPhone5S iPhoneSE iPhone7 iPhone6S アルミ 合金 ゴールド シルバー 丈夫 タフ 断線しにくい マグネット iPhone ケーブル USBケーブル【送料無料】

価格:1,180円
(2017/1/6 13:57時点)
感想(16件)