-1
アンカーを使用して異なるdivにスクロールするウェブサイトを作成しています。しかし、リンクをクリックすると、アンカーされたdivはページの中央に配置されません。私はdivsを絶対的に配置しましたが、それがそれに影響を与えるかどうかはわかりません。誰でもアンカーを使用してdivを中央に配置する方法を知りませんか？助けてください！アンカータグは、クリック後にページ上に配置されません。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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">
<a href="#jeanandjames" class="anchorLink">JEAN AND JAMES</a>
<a href="#feature" class="anchorLink">FEATURE PRODUCT</a>
<a href="#contact" class="anchorLink">CONTACT</a>
<a href="#work" class="anchorLink">WORK</a>
</div>
<div id="logo">
<img src="logo.gif" />
</div>
<a name="jeanandjames" id="jeanandjames">
<div id="jeanandjames" align="center">
<img src="jeanandjames.jpg" /><br />
A boutique design firm specializing in hand crafted products and graphic print work.
</div>
</a>
<a name="feature" id="feature">
<div id="feature">
<img src="baby_bowtie.gif" />
</div>
</a>
<a name="contact" id="contact">
<div id="contact">
Jean & James
Chicago, IL<br /><br />
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>
</a>
</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;
}