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


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

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


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

Android/iPhone/type-c共通
Android/iPhone 共通

TOMSMOO 第四世代 1M ナイロンメッシュ編 マグネット式 充電ケーブル 高耐久 データ通信可能 iPhone/iPad/Android/Type-C/USB-C対応 (シルバー 1M)

新品価格
¥1,180から
(2019/4/15 16:13時点)

TOMSMOO マグネット式 充電スタンド 携帯電話ホルダー 3 in 1 Lightning/Micro USB/Type C データ伝送 ナイロン編みケーブル付き iPhone X/8/8 Plus/7/7 Plus/6/6 Plus/6S/6S Plus/Galaxy S8/S8 Plus/S7/S7 Edge/Sony Xperia/Nexus/各種スマートフォン対応(ブラック)

新品価格
¥1,866から
(2019/4/15 18:24時点)

Mantis(マンティス)【2in13本セット】2in1 iPhone / Android マグネットケーブル  Lightning & Micro USBまぐねっと端子 第五代 一本両用 磁石 着脱式 防塵機能 急速充電 高速データ通信転送 ハイクオリティ磁気吸収データライン 強化ナイロンメッシュ編み 高耐久 断線防止 アイホン usb延長ケーブル マイクロスマートフォン 変換アダプター アンドロイド ライトニング ケーブル (3色)

新品価格
¥2,899から
(2019/4/15 16:26時点)