50代から理数を学ぶ - アンカーと position:fixed

Home > ブログ > 時空解 > パソコンソフト関連 > アンカーと position:fixed

時空解さんの日記

2017

6月 18

(日)

09:11

アンカーと position:fixed

前の日記次の日記

カテゴリーパソコンソフト関連

本文

皆さん、おはようございます。時空解です。

昨日はまる１日コンテンツ作りに時間を取られてしまいました。
青チャートの p96 「７命題と証明」の節に入る予定でしたが、その前にコンテンツを１つ作ってから…と思っのです。それでコンテンツが１つでも出来れば、それはそれで良いのですが…。

残念な事に、コンテンツの先頭に「ページ内目次」を設置しようと思ったのが失敗でした。そもそも私のサイト「50代から理数を学ぶ」の上部に 93px 分の固定部分を作ってしまったのが失敗だったかなぁ… ？

１つのコンテンツページの中でも、リンクが使える事はご存知ですよね。
ページ内にアンカーと言う目印を付けてやって、そのアンカーにリンクを通すのです。そうするとページ内にあるアンカーの位置に、ページがスクロールするようになるんですよね。

実際にこのブログページに、そのアンカーとリンクを入れてみましたので、動作を診てみてくださいね。93px 位置がずれてしまいます。それが確認できます。

------スタート-------
・コンテンツ内にアンカーをいれて、そこにリンクを通せば「ページ内目次」が作れる。

ページ内目次
1.本文の先頭にジャンプ (皆さん、おはようございます。時空解です。の位置)
2.「スタート」
3.「エンド」

上記のように箇条書きされた文字列１つ１つにページ内リンクを貼ってやると「ページ内目次」のように見えて、クリックするとその場所にジャンプします。
------エンド-------

実際に上記の３つのリンクをそれぞれクリックして頂ければ分かりますが、ジャンプ位置がずれますよね？
例えば【 2.「スタート」】をクリックしても ------スタート------- の位置にはスクロールしません。これは、サイトの上部に 93px のスペースがあるから、その下に ------スタート------- が潜り込んでしまうのです。

この 93px のずれを修正する方法は２つほど検索して確認する事ができます。例えば下記のサイトです。

・position:fixedでヘッダ固定時のページ内リンクのずれを解消したい

でもこれだれの情報では、私には利用出来ませんでした、とほほです。

結局、昨日は数学の勉強もできず、そろばんも出来ず、です。

この続きはまたにします。今日もハマってしまうと、只でさえ遅れている数学の学習が、ドンドン遅れてしまいますからね。

では今日も１日を始めます。

応援してね。
千里の道も一歩から。そしてその道は登り坂です。
(ポチッとブログ村のバナーをクリックしてね）

毎日の実施・予定表
項目	昨日の実施状況	今日の予定
ブログを更新	９時にアップ	８時半
数学の学習	出来ず	p96(命題と証明) ～ p104
そろばんの練習	出来ず	３０分
サイトのコンテンツ	作れず	-------
休日に LaTeX2ε 学習	出来ず	------
プラスアルファする事、１つ。	-----	-----

閲覧(5337)

コメントを書く
コメントを書くにはログインが必要です。