Question

我正在创建一个网站，通过使用锚点向下滚动到不同的div。但是，当我单击链接时，该锚定的div不在页面的中心。我绝对定位了我的div，但我不知道这是否会影响它？任何人都有任何线索如何使用锚定位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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="#feature" class="anchorLink">FEATURE PRODUCT</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="#contact" class="anchorLink">CONTACT</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="#work" class="anchorLink">WORK</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</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;
}

Answer 1

尝试删除包含内容div的元素。

Answer 2

我不打算这么残忍，但是标记和CSS都很糟糕，这个问题几乎和“我如何以CSS为中心？”一样基本。这不是插件，它会破坏你的东西，它只是你的标记和CSS。我们来解决一些问题：

所有这些 实体都不是空间导航的正确方法。 CSS用于此。
你在div上使用align =“center”，这违背了CSS的目的
你的主播上有一个名为“anchorLink”的课程，这是设计这些链接的理想方式，但它们没有设计样式。
作为一个新手，你可以原谅我不知道这一点，但它被认为是一个很好的形式来创建一个“小提琴”（jsfiddle.net上的免费服务）或其他托管样本，以便人们可以修补而不仅仅是分析代码
您正在使用锚标记包装div。老实说，我不记得这是“不正确”的标记，还是简单地认为是不好的做法。

这里有一个标记和CSS的小提琴（没有必要包含插件来解决你的问题，所以我没有打扰包括它）：

http://jsfiddle.net/85Tp5/

所以，那是布道。

我非常愿意并且很乐意因为没有提供真正的答案而冒着被低估的风险，因为我认为我在这里的评论是有价值的，并且它太过于适合实际的“评论”。那些对这个问题本身提出质疑的人和我一样处于同一个位置，但没有精力去写出我们都在想的东西。

如果您真的想获得一些真正的帮助，请使用小提琴创建一个在没有图像的情况下工作的示例。不要担心滚动插件（它只是直接跳到你的锚点，这不是你的问题）。一旦你成型，你可能已经回答了你自己的问题。但如果没有，人们会更好地帮助你。

一切顺利！

单击后锚点标记不在页面中心

2 个答案: