”#”で飛ぶ先を1,2文字分上にしたい。

Question

お世話になっております。

件名の通りなのですが
”#”で飛ぶ先を1,2文字分上にしたい。
と思っております。

理由はBootstrapで見栄えを「可変グリッドレイアウト」にすると
とび先が

<div id="menu">
　<a href="index.html#tobasu">
  メニュー
  </a>
</div>
：
：
：
<img src="img/big.png" >
<div id="tobasu">
ここに
とばしたいの
ですー
</div>

が

【Bootstrapメニュー】
とばしたいの
ですー

となってしまうのです……

ですので#で飛ばす先を1,2文字だけ上にしたいのですが
良いやり方ございませんでしょうか？

何か情報をお持ちな方は何か情報を頂けますと嬉しく思います。

Comments

[m.ts10806]

質問には画像を添付できるので画面キャプチャーなどを貼っていただいた方が、文字だけの説明よりもイメージがわきやすいと思います。また、関係する現在のソースコードや、やってみたこと、調べたことがあればご提示ください。

[sk_3122]

少なくとも現状のソースとかあると良いのですが。今は p タグに id を指定しているのでしょうか？ 現状ソースがあれば「ここをこう直すのです...」とか指定しやすい

[moitaro]

皆様コメントありがとうございます。仰る通りですね……ですがBootstrapの所を全部貼るのは難儀なので少々手直ししました……わかりづらいでしょうか？

[m.ts10806]

Bootstrapはバージョンともし自身で手を加えたところがあればそこを明記してもらえれば充分と思います。Bootstrapで使っている機能があればその名前とかイベントとかですね。実現するためにやってみたこと（未完で良いです。ヒントになりえます）があればその辺りがあれば、という感じですね。既に回答でている通り、Bootstrapの影響関係なくできそうには思います。

Answer 1

paddingでずらしてはどうでしょう？

.hoge{height:1000px;padding-top:1em;}
#hoge1{background-Color:yellow;}
#hoge2{background-Color:lime;}
#hoge3{background-Color:aqua;}

<div id="hoge1" class="hoge">
<a href="#hoge1">1</a>
<a href="#hoge2">2</a>
<a href="#hoge3">3</a>
</div>
<div id="hoge2" class="hoge">
<a href="#hoge1">1</a>
<a href="#hoge2">2</a>
<a href="#hoge3">3</a>
</div>
<div id="hoge3" class="hoge">
<a href="#hoge1">1</a>
<a href="#hoge2">2</a>
<a href="#hoge3">3</a>
</div>

追記

もうちょっと突っ込んで、ようはheaderが固定でおいてあって
本文が隠れるのがいやなんですよね?

body{padding:0px;margin:0px;}
#wrap{position:relative;}
#header{background-Color:gray;color:red;position:fixed;height:1.5em;width:100%;}
.hoge{height:1000px;padding-top:1.5em;}
#hoge1{background-Color:yellow;}
#hoge2{background-Color:lime;}
#hoge3{background-Color:aqua;}

<div id="wrap">
<div id="header">header</div>
<div id="hoge1" class="hoge">
<a href="#hoge1">1</a>
<a href="#hoge2">2</a>
<a href="#hoge3">3</a>
</div>
<div id="hoge2" class="hoge">
<a href="#hoge1">1</a>
<a href="#hoge2">2</a>
<a href="#hoge3">3</a>
</div>
<div id="hoge3" class="hoge">
<a href="#hoge1">1</a>
<a href="#hoge2">2</a>
<a href="#hoge3">3</a>
</div>
</div>

Comments

[moitaro]

コメントありがとうございます。
仰る通りheaderで本文が隠れるのが嫌なので#で飛ぶ位置をズラしたいのです……
上記のやり方は後程確認します……

コメントありがとうございました。

Answer 2

Bootstrapのサイト自体はこの記事にあるように::beforeに負のmargin-topをつけて対応しているようです。
http://yuheiy.hatenablog.com/entry/2017/08/16/184807

Comments

[moitaro]

ありがとうございます。
これが一番近そうです。
ちょっと問のURLに埋め込むには
読み解くのに時間が足りないので宿題とします。

Answer 3

img の上にジャンプさせたいのですかね。

であれば

• img と div を、さらに div で囲む
• id="tobasu" は外側の div に指定する
• 外側の div に padding-top を指定する

で良さそうでしょうか。

<style>
  #tobasu { padding-top:2em; }
</style>

<div id="tobasu">
  <img src="img/big.png" >
  <div>
  ここに
  とばしたいの
  ですー
  </div>
</div>

こんな感じの構成にできますかね？
（bootstrap だと 入れ子が結構 複雑になってしまったりしますけど どうですかね）

Comments

[moitaro]

コメントありがとうございます。
こちらのやり方だと
#tobasu { padding-top:2em; }
で上部に空白か引き伸ばしが起こるので無理でした……
このような形で出来れば良いのですけど……

[sk_3122]

引き伸ばしが起こるというのは、
さらに外側に 枠線 や 背景色 などが指定されているということでしょうか。
前のブロックと tobasu ブロックの間隔は空けたくない（ぴっちりくっつけたい）等？

もしそうであれば javascript で スムーススクロール とかを仕込んだ方が良いかもしれませんねぇ･･･
（javascript で飛ばすなら position - 20 とかすれば良さそうだし、せっかくならスムーススクロールにすれば ぬるっと動いて良さげですが）