私は、アンカーの使用によって異なるdivにスクロールするウェブサイトを作成しています。しかし、リンクをクリックすると、アンカーされたdivはページの中央に配置されません。私はdivsを絶対的に配置しましたが、それがそれに影響を与えるかどうかはわかりません。誰でもアンカーを使用してdivを中央に配置する方法を知りませんか？助けてください！
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jean and James</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.anchor.js" type="text/javascript"></script>
<link href="jj_css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navigation" align="center">
JEAN AND JAMES
FEATURE PRODUCT
CONTACT
WORK
</div>
<div id="logo">
</div>
<div id="jeanandjames" align="center">
A boutique design firm specializing in hand crafted products and graphic print work.
</div>
<div id="feature">
</div>
<div id="contact">
Jean & James
Chicago, IL
Donec faucibus nunc eget quam pretium vel porttitor diam venenatis. Nullam egestas, quam et congue rutrum, diam mauris tempus urna, eget mattis quam quam ac erat. Vivamus lobortis nunc quis arcu lobortis vel euismod felis tincidunt. Etiam facilisis, metus et mattis tempor, erat ipsum tincidunt diam, nec aliquam velit risus a lacus. Duis tempor bibendum felis, adipiscing mattis lorem eleifend fermentum. Nulla adipiscing consequat enim id sagittis. Suspendisse venenatis scelerisque orci, sed sollicitudin erat egestas in. Nunc orci leo, adipiscing vel consectetur sit amet, rutrum vitae nulla. Mauris ut mi nunc, non condimentum risus. Donec varius consequat quam vel lacinia. Etiam et eros nec quam egestas pellentesque sit amet ac nunc.
</div>
</body>
</html>
そしてここに私のCSSがあります：
#navigation A:link {text-decoration: none; color: #FFFFFF;}
#navigation A:visited {text-decoration: none; color: #FFFFFF;}
#navigation A:active {text-decoration: none; color: #FFFFFF;}
#navigation A:hover {text-decoration: none; color: #CC9;}
#navigation {
position: fixed;
top: -1px;
left: -1px;
width: 100%;
height: 20px;
padding: 10px;
z-index: 10;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #000;
color: #FFF;
}
#logo {
position: fixed;
top: 150px;
left: 50px;
}
#jeanandjames {
position: absolute;
top: 230px;
left: 200px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#feature {
position: absolute;
top: 600px;
left: 200px;
}
#contact {
position: absolute;
top: 1200px;
left: 200px;
width: 500px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
ベストアンサー
私は残酷になるつもりはありませんが、マークアップとCSSの両方が悪く、質問は「CSSをどのように中心に置くのですか」のように基本的なものです。プラグインではなく、マークアップとCSSだけです。いくつかの問題に取り組んでみましょう：
- All those
space out your navigation. CSS is used for
that. - You are using align=”center” on a div, which defeats the
purpose of CSS - You have a class on your anchors called “anchorLink” which is
an ideal way to style those kinds of links, and yet they are not
styled. - As a newcomer, you can be forgiven for not knowing this, but
it’s considered good form to create a “fiddle” (a free service at
jsfiddle.net) or another hosted sample so that people can tinker
instead of merely analyse code. - You are wrapping divs with anchor tags. I honestly can’t
remember if this is “incorrect” markup or simply considered bad
practice.
マークアップとCSSのフィーリングがあります（あなたの問題を解決するためにプラグインを含める必要はないので、それを含めて気にしません）：
それは説教です。
実際の答えを提示しないという理由で、私がここにいるコメントは貴重なものだと思うので、私はとても喜んで喜んで拒否しています。質問自体を下落させた他の人たちは私と同じ立場にあるが、私たちが全部考えていることを書く力はなかった。
あなたが実際に本当の助けをしたいのであれば、あなたのイメージなしで動作するサンプルを作成するためにフィドルを使用してください。スクロールしているプラグインについて心配しないでください（この時点であなたの問題ではないアンカーに直接ジャンプします）。あなたがそれを形にしたら、おそらくあなた自身の質問に答えたでしょう。しかし、そうでなければ、人々はあなたを助けるより良い立場にいるでしょう。
ではごきげんよう！