電子書籍の厳選無料作品が豊富！

ページ内リンクがずれてしまう

解決済

  • 質問者：shiopple
  • 質問日時：
  • 回答数：2件

お世話になっております。
制作しているWEBで、ページ内リンクを使用しているのですが、いざリンクへ飛ばすとずれが起こり固定ヘッダーの部分と画像が被って困っています。

http://depthcode.com/2011/02/header-fixed.html
上記のサイトを参考にアンカーの位置を調整したところヘッダーに被らず画像もぴったり収まったのですが、こちらの要望としてはリンクで飛んだあとも添付画像のように画像とヘッダーの間を常に空けた状態にしておきたいのです。
どのように設定すれば良いかご教授お願い申し上げます。

「ページ内リンクがずれてしまう」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

補足いただきましてありがとうございます。



いただいたCSSを元にHTMLを作成してみたのですが、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<style type="text/css">
<!--
#top {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 70px;
background: red;
}
#work {
width: 840px;
margin-top: -70px;
margin-right: auto;
margin-left: auto;
padding-top: 70px;
background: green;
}
#contact {
width: 840px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 70px;
background: blue;
}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9. …
<script type="text/javascript">
$(function(){
$('a[href^=#]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script>
</head>
<body>

<div id="top">top</div>

<div id="work">work</div>

<div id="contact">contact</div>

<div style="background: pink; height: 2000px;" ><a href="#top">to top</a><br /><a href="#work">to work</a><br /></div>

<div style="background: yellow;" ><a href="#top">to top</a><br /><a href="#work">to work</a></div>

</body>
</html>

このHTMLだと私の環境では、きっちりと各タグの先頭にページ内リンクできました。
（FireFox 最新版、GoogleChrome最新版、IE7～10）

この動作がshiopple様がお考えの挙動と相違無いとすると、
ヘッダーを固定するスクリプトと何か干渉している可能性がありますでしょうか・・・？？(・・；)

可能であれば、現状のHTML、Javascript、CSSなどをもう少し仔細にお伝えいただければ、
解決の糸口を示すことができるかもしれません。

ご確認の程、何卒よろしくお願いいたします。

この回答への補足

お礼が遅れてしまいまして大変申し訳ございませんでした。
丁寧なご回答ありがとうございます。
現状としましては、こちらの都合でWEBサイトの制作を急がなくてはならなくなり、ページ内リンクを使わずにひとまずWEBサイトを完成させました。


ご呈示頂いたHTMLをそのまま打ち込んでみたのですが、これは何かおかしいですよね・・・？
http://sampleeeeee.web.fc2.com/sample.html


ヘッダー固定のjsが

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8 … type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {

var nav = $('#header'),
offset = nav.offset();

$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
nav.addClass('fixed');
} else {
nav.removeClass('fixed');
}
});

});
</script>


ヘッダー部分のhtmlは

<div id="header">
<ul class="navi">
<li class="top"><a href="#top">top</a></li>
<li class="work"><a href="#work">work</a></li>
<li class="contact"><a href="#contact">contact</a></li>
</ul>
<br clear="all" />
</div>


CSSは
#header {
background-color: #143259;
height: 80px;
width: 100%;
}
ul.navi {
float: left;
position:relative;
left:50%;
list-style-type: none;
}
.navi li.top a {
display: block;
height: 30px;
width: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #F2EBD5;
letter-spacing: 0.2em;
text-decoration: none;
text-align: center;
margin-top: 24px;
}

.navi li.top a:hover {
border-bottom: solid 5px #D98B84;
}

.fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}


となっております。

補足日時：2013/09/04 11:18
通報する
    • good
    • 0
    • 件
通報する

No.1

http://depthcode.com/2011/02/header-fixed.html
現状は、こちらの参考サイトの「CSSでアンカー位置をずらす」のように、
margin-topに負の値を設定した状態でしょうか・・・？

であれば、もう少しだけ数値を負の方向に大きく（-100px　→ -200px）のような形で、
微調整することで位置調整することはできませんでしょうか？？

ご参考になれば幸いです。

この回答への補足

ご回答ありがとうございます。
説明しづらいので現在のCSSを記載させていただきます。

#top {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 70px;
}
#work {
width: 840px;
margin-top: -70px;
margin-right: auto;
margin-left: auto;
padding-top: 70px;
}
#contact {
width: 840px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 70px;
}

仰られているように負の数値を大きくすると、空間が狭まってしまったので正の方を大きくしています。
現在この状態で、#topと#contactは正常に空間が維持されたままリンクに飛びます。
（ですが、#topもスクロールバーが一番上にある状態で#topのリンクへ飛ぶと画像部分がヘッダーと被ります）

スクロールバーが一番上にある状態で#workに飛ぶと画像が全てヘッダーと被り、
スクロールバーが一番下にある状態で#workに飛ぶとヘッダーに若干画像の上部が被るという状況です。

ちなみに下記のサイトで紹介されているjQueryを使用しています。
http://klutche.org/archives/536/

補足日時：2013/08/20 15:03
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

今、見られている記事はコレ!

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報